MarkerOptions icon not showing png image about gmapsfx

[GeoffCapper]

Hi Roddy-bludot,

IIRC, I don't think the icon has been implemented in MarkerOptions yet.
Only essential functionality and stuff specifically required by the
developers who have worked on it has been implemented so far. Not sure
when I'll have time available so wanted to let you know so you don't
keep banging your head against the proverbial wall trying to get it
working! If you get a hold of the sources and browse through it should
show you what has and hasn't been implemented to date.

Cheers,
Geoff

On 5/05/2015 2:12 PM, roddy-bluedot wrote:

There is not a lot of information on the expectation of the scope of
the icon property in MarkerOptions; I am attempting to pass it a path
to a PNG image in the resources but nothing is appearing when adding
the marker to the map.

In the code snippet below, if the icon method is removed, then the
default marker icon is displayed.

| MarkerOptions immediateMarkerOptions = new MarkerOptions();
immediateMarkerOptions.position( latLong );

         if ( currentMode == SimulatorModes.immediate )
         {
             immediateMarkerOptions.icon( "images/MarkerGreen.png" );
         }
         else
         {
             immediateMarkerOptions.icon( "images/MarkerPin.png" );
         }

         immediateMarker = new Marker( immediateMarkerOptions );
         map.addMarker( immediateMarker );

|
|

—
Reply to this email directly or view it on GitHub
#39.

[roddy-bluedot]

No worries - thanks for letting me know.

[GeoffCapper]

I've had a quick look at this and MarkerOptions.icon is implemented.
According to the Google Maps javascript API spec it needs to be a URL to
the icon or sprite sheet, so that may be the issue. Per
https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

"Icon for the foreground. If a string is provided, it is treated as
though it were an |Icon| with the string as |url|."

On 5/05/2015 2:12 PM, roddy-bluedot wrote:

There is not a lot of information on the expectation of the scope of
the icon property in MarkerOptions; I am attempting to pass it a path
to a PNG image in the resources but nothing is appearing when adding
the marker to the map.

In the code snippet below, if the icon method is removed, then the
default marker icon is displayed.

| MarkerOptions immediateMarkerOptions = new MarkerOptions();
immediateMarkerOptions.position( latLong );

         if ( currentMode == SimulatorModes.immediate )
         {
             immediateMarkerOptions.icon( "images/MarkerGreen.png" );
         }
         else
         {
             immediateMarkerOptions.icon( "images/MarkerPin.png" );
         }

         immediateMarker = new Marker( immediateMarkerOptions );
         map.addMarker( immediateMarker );

|
|

—
Reply to this email directly or view it on GitHub
#39.

[chris-asl]

Sorry to re-open this, but I wanted a clarification on the last post by @GeoffCapper .
This means that we cannot load local icons (png) files?

As seen here, they've loaded local icons:

var image = {
    url: 'images/beachflag.png',
    ....

The network solution (uploading the icon and using the URL to it), doesn't work quite reliably.
Have tried both imgur and dropbox public folder.
With unreliable, I mean that in some zoom-levels the icons won't show up.

So, is there any way to load a local png file to be used as a marker?

Also, in which directory should it be loaded?

Because I've tried with the uploaded icons by adding them at the project-root/resources/icons/radio.png.
This is the project's directory structure:

├── resources
│   ├── datasets
│   └── icons
└── src
    └── com
        └── nomad
            ├── algorithms
            ├── model
            ├── util
            └── view

Used these paths:

1. "/resources/icons/radio.png"
2. "./resources/icons/radio.png"
3. "resources/icons/radio.png"
   and had no luck.

[GeoffCapper]

Hi chris-asl,

This is obviously a trouble filled issue because of the way we need to interact with the webview in order to display the remote google map.

After a bit of testing I was able to get custom png markers working, but only by including them in the html folder of the GMapsFX project. (src/main/resources/html)

This is where the web page that is displayed in the webview component is sourced from, so it must act as the root of the local browsing. Doing this, I have simply referenced the marker png using .icon("mymarker.png"); when setting up the MarkerOptions object, which further reinforces my thinking that the webroot is wherever the html file that displays the map appears.

To get you out of trouble immediately, you could fork this project and include the markers in the html folder.

For the long term/actually useful solution, it might be possible to pass in the address for root html file that displays in the WebView. I say "might" because I'm not sure if this would work across jars, which would be the most likely use case. I'm fairly certain we could load the html file from a different jar (we're currently using getResource() to do this from the main jar) but I have not tested it to see if we would still be able to load images and other content from that other jar. Some quick research I did suggests that it is possible, but I can't promise anything at this stage.

I will have a play around with it and see what I can come up with.

[chris-asl]

Hello GeoffCapper,

Thank you for your prompt reply!

Firstly, regarding forking this project:
I have an already set up project in IntelliJ IDEA and I am using the jar of gmapsfx as a lib.
So, is there any way to integrate this temporary solution to my project?

I'll be around so that I can test your suggestions when you have something new. I hope I can help somehow.

[GeoffCapper]

Hi Chris,

You would need to get the sources for the lib and build them locally from that, then use the jar you are create. The best way to do that and get the latest updates is to create your own fork of this project into your github account or pull straight from here to your local machine. I'm afraid I haven't used IntelliJ so I can't offer any help there regarding any git integration it might have.

Once you have a local copy you can put your marker files into the "src/main/resources/html/" folder and build the GMapsFX jar, then referencing the markers in your project using the direct filenames should work. Assuming you've put a marker in called mymarker.png:

myMarkerOptions.position(myLatLong).title("My Marker").icon("mymarker.png").visible(true);

Cheers,
Geoff

[GeoffCapper]

Hi Chris,

I have just put up some changes and made a new release that includes them. It allows you to specify the path to an html map file in the GoogleMapView constructor, so you can put the html file in your app jar, along with custom marker images, and they will all be accessible.

Cheers,
Geoff

[ankanx]

Hi! im useing the 1.1.3 jar and saw that the html folder has the "mymarker.png" from the example Geoff gave earlier, allso tried to add one myself and build the jar file, but i still dont get it to work with marker icons, even with the example Geoff gave and the file currently in the jar. Could i ask Geoff to do a step for step description of the process as i seem to be missing something?

[klemensh]

Any updates on this? I also tried to create the maps.html in my resources folder, but the icons (nor other resources) are not accessible. I initiate the MapView like this: mapView = new GoogleMapView("/gmap/map.html"); and set the marker options: markerOptions.icon("pin.png"); The pin.png file is in the same folder as the map.html. I also tried it with a local copy of the project. Please let me know if there is some kind of solution (except uploading the icons)!
Regards and thanks in advance,
klemensh

[rterp]

@klemensh I'm not sure where this was left at. I'll have to see if I can replicate and then see what a workaround may be.

Thanks,
-Rob

[GeoffCapper]

This issue is due to the change to webengine.loadContent() instead of webengine.load(), which looks like it was done to allow language to be specified. There are better ways to implement the language and API key insertion that would allow us to continue to use load() rather than loadContent() and keep this other functionality.

The decision will depend on how we think the library should be used. At the moment it seems like a lot of stuff has been added in to facilitate restructuring the HTML file supplied in the library to do the job.

People could be creating their own jar with an HTML file and custom markers, in which case they can specify their API key, language parameters and what-not inside their HTML file.

The other option is to properly parameter-ise the different parts of the script URL and inject them using javascript into the HTML file in the jar, and return to the load() method.

As far as I can tell using loadContent() will not work as it doesn't maintain a proper root in the jar, unless I'm missing some other way to refer to resources in HTML that come back to a local jar?

I'm going to update my fork with a fixes for this, I'll see what I can come up with.

Was there a specific reason for including all the WebView initialisation inside a thread with a CountdownLatch? The loading is asynchronous anyway, but I don't want to remove it if I'm missing something!

[GeoffCapper]

I've put through a pull request to resolve these issues, but it's a bit of a drastic change so I'd like @rterp Rob to review it first rather than committing it myself. In the meantime I've committed it and released on my fork so you can try it from there.

[rterp]

Looks good @GeoffCapper , I've gone ahead and merged the pull requeset.

Thanks,

[rterp]

Added to milestone 2.0.7

[danieler81]

i just include the library 2.0.8 (jar file) to my intellij project but i cant add customizzable Marker to my map.
i read the whole post and i tried everything but still nothing.
can you please suggest me the right procedure to make it works?

[GeoffCapper]

There are two ways to add a custom marker, you either need to recompile this project with your own markers beneath the html folder in the jar, or you need to pass a reference to your own html file in your own jar into the GoogleMapView constructor, then your markers should be in the same folder as, or below, the html file in the hierarchy.

/src/main/resources/html/maps_1.html and maps_2.html gives you a starting point for this option.

[GeoffCapper]

@danieler81 After giving this a little more thought I've created a new class that will allow you to pull images from your own jar while using the GMapsFX library as is. No more will you need to recompile the library, or use your own HTML file. You can either build from the source, or wait until @rterp can produce another release. Usage is:

markerOptions.icon(MarkerImageFactory.createMarkerImage("/path/to/my/image.jpg", "jpg"));

[danieler81]

Perfect,
i just saw your first answer so i was trying to make it, but the new solution looks easier and faster.
lets wait the new release then.
thanks a lot

[rterp]

Will hopefully get release 2.1.0 out by EOD tomorrow.

[Abu-Abdullah]

hi,

im trying to use the new MarkerImageFactory but it seems it is not working in windows. any idea how to troubleshoot this

[GeoffCapper]

Are you receiving any error messages? It was built on windows initially, so that shouldn't be an issue. Have you tried a simple self-contained test? If so, and it fails, can you post it as a new issue?

[Abu-Abdullah]

i didn't receive any error msg. I'm using:

markerOptions.position(center)
	.title("Camera Test")
	.visible(true)
	.icon(MarkerImageFactory.createMarkerImage("E:/GroundStation/icon.png", "png")); 

i will write down a sample code later.
i tried to convert it as well to proper URI

new File("E:/GroundStation/icon.png").toURI().toURL().toExternalForm();

but the same result. it shows the original google map marker icon. i tried to upload it in a web site to see if the problem is from the icon format or size and it works so i guess it is not an icon issue.

i have looked into the code, i have one comment.

Class.getResource() allows you to specify a path relative to the package of the class, whereas ClassLoader.getResource() is always an "absolute" path.

[GeoffCapper]

Have you tried using the file:// scheme to get the path on your local machine?

[Abu-Abdullah]

i tried that as well
file:/
file://
file:///

[GeoffCapper]

After a bit of research... Class.getResource and ClassLoader.getResource are both limited to accessing resources on the classpath, so neither would work for loading from the filesystem.

I've put up a change to MarkerImageFactory that will detect a "file:" scheme and handle it properly, creating an image directly rather than loading it as a resource. Proper file URIs for windows start with "file:///{drive letter}" according to the specs. So for your example:

.icon(MarkerImageFactory.createMarkerImage("file:///E:/GroundStation/icon.png", "png"));

You'll have to build it yourself or wait for Rob @rterp to do so.

[Abu-Abdullah]

@GeoffCapper thanks, it works now

[leganas]

I would like to giv my decision this problem

markerOptions.position(markerLatLong)
     .icon(MarkerImageFactory.createMarkerImage(baseDir()+"image/Arrow_3.png", "png"))
     . . .

    private String baseDir() {
        String baseDir = "";
        try {
            baseDir = new File(".").getCanonicalPath();
        } catch (IOException e) {
            e.printStackTrace();
        }
        baseDir = baseDir.replace('\\','/');
        baseDir = "file:///" + baseDir + "/src/";
        return baseDir;
    }

my absolute filepath d:\MyProject\ServerJavaFX\src\image\Arrow_3.png

if you use the structure

markerOptions.position(markerLatLong)
     .icon(MarkerImageFactory.createMarkerImage("image/Arrow_3.png", "png"))
     . . .

then absolute path com.linden.gmapsfx.util.image / ......(filename)

gmapsfx version 2.0.9 from Maven,
MarkerImageFactory.createMarkerImageFromFile
method does not contain
:(

[wdorf]

Hi,

It works this way:
path = "file:///C:/Users/Warendorf/workspace2/OOS2%20Lab/icons/basestation.png";
String imgpath = MarkerImageFactory.createMarkerImage(path, "png");
imgpath = imgpath.replace("(", "");
imgpath = imgpath.replace(")", "");

Remarks:

The path must be absolute
Spaces must be replaced with %20
The string createMarkerImage returns includes ( and ). These must be removed

Please remove ( and ) in the next version.