Currently you can use googles chart api to load custom markers with different colors
See here: https://developers.google.com/chart/image/docs/gallery/dynamic_icons
But this has been deprecated. So to ensure that my website works in the future what should I be using?
Or is there some simple way of defining the color of the markers using css or something?
instead of using a deprecated library I found http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#StyledMarker which works perfectly :)
Related
In my recent Angular project I am using material icons by using google fonts as
https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp
I have tried using all preload mechanism with attribute.
When loading the Angular app, it takes while to display the icon. I have tried using self hosting also, but to no avail. It takes a while to render the actual icon.
Can any one suggest possible options to make the rendering of the material icon smoother/faster without having flickering effect to the users?
Try to use FontFace.load(). It will give you a Promise. https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load
I work with the leaflet plugin leaflet-realtime by Per Liedman.
https://github.com/perliedman/leaflet-realtime
In my application, the user can switch between different realtime JSON sources. My problem is, if I change the source, the previous markers remain on the map.
I made a plunk with a modified earthquake example, here you can see the behavior.
https://next.plnkr.co/edit/MzecRNp0ocAuCQF6?preview
Maybe something with remove, but I don't know where and how to use it.
Working with a LayerGroup and clearLayers() before reading the new data works, but it is not nice ("blinking markers").
Thank you for your help!
I have found a solution. leaflet.realtime provides the function setUrl() (not in the README but mentioned here https://github.com/perliedman/leaflet-realtime/issues/15)
Changed the script.
https://next.plnkr.co/edit/weeikt129ADzHFrh?preview
Important: "leaflet.realtime version 2 and up of this plugin is _only compatible with Leaflet 1.0 and later. Use earlier versions of Leaflet Realtime if you need Leaflet 0.7 compatibility." See README.md
I know we can generate a custom image using this link.
But the point is, I want a custom image that does not have any borders. With the link provided you can generate a custom image or .patt file with a black border around that image. It is applied to every image that is uploaded. The thing is, I want to use that image the way I want without the border as is shown. So my question is, is this possible in AFrame?
If not, please suggest me any other library or any other process that I can use to achieve this, if this is possible at all.
Update: Please look at #kalwalt's answer below. It is possible now.
currently it is not possible to use markers without border using jsartoolkit. There has been work to enable this. You can have a look here: https://github.com/artoolkitx/jsartoolkit5/tree/nft
However, that only performs on desktop not mobile.
Another way could be using OpenCV.js template matching: https://docs.opencv.org/3.4/d8/dd1/tutorial_js_template_matching.html
cheers
The NFT feature that Thor_Bux mentioned is merged on the master branch of artoolkitx/jsartooolkit5 and also in the new AR.js repository.
You can find the Ar.js documentation at:
https://ar-js-org.github.io/AR.js-Docs/
Image Tracking (NFT):
https://ar-js-org.github.io/AR.js-Docs/image-tracking/
Note that Ar.js is under a new github organization and any collaboration is very welcome.
I want to create a custom interactive map which will be similar to this one: http://shows.marketart.com/surf10/
the example is developed using flash, and I want to make somthing similar to it using jquery and html5 if possible, the main requirements are: zooming, plotting on the map,
thank you in advance for any recommendations
regards,
I see two possibilities:
1- Do a image map and use a image point plugin like This with a tooltip plugin, if you need.
2- See this Question and do with css and use tool tip plugin.
For zoom, you can easy use a Jquery plugin
There are similar jQuery plugins too. For example:
http://www.virtualsen.se/map/
I have multiple locations (20+ per page) that need to be mapped on a single map. I would like to click on a link for the location that is not dynamically generated (for SEO purposes) that would open the info window for the respective marker on the map.
Behavior should mimic http://maptheburg.com/ - but this map has the sidebar links dynamically generated.
Yelp.com is the only site I have seen so far that manages to implement the Google Maps API with unobtrusive JavaScript.
I'm not entirely sure what the yelp implementation is but if it's unobtrusive JavaScript mapping you're after then your only feasible option is to deliver a static image rather than an interactive map where JavaScript is unavailable.
A quick walk through of this technique can be found here
HTH.
Yelp.com has it's own JavaScript library which is interacting/using Google Map's JavaScript API for maps. You might want to start by peeking in there.
Might want to also check out PdMarker for advanced Google Maps markers.
If I remember right, Yelp took one of the open-source markers implementations and modified it for their own uses.