I'm using foursquare API to show some places on a map. When I tried to render the icons in the categories some images give 404. Ex:
https://foursquare.com/img/categories_v2/shops/mall.png
So I change the pattern to match this path that is the path that foursquare uses for it's icons:
https://foursquare.com/img/categories_v2/shops/mall_32.png
The problem now is that these icons have transparent background (which looks confusing) and I want to know a way to attach these markers some kind of background.
Thanks!
PD: I don't want to use shadows because I read it's deprecated.
Google map markers are put in place as Canvas elements not DOM elements, and there's no direct equivalent of a background image.
You could try one of two things :
Create your own marker image complete with a halo or background rectangle, then specify your image as the icon when marker(s) are created (see the marker options section of the documentation).
Create a general purpose background image with no foreground then, for each required marker create two markers positioned such that the foreground overlays the background.
The first approach is more efficient and would generally be preferred.
The second approach might be useful if you had many types of marker and wanted each of them to be set against the same background image. This would be inefficient in terms of client CPU and RAM but would save you time in preparing the artwork.
Related
How can I pass overlay map image with image bounds in static map service?
I have an image which I want to overlay on map at certain position, looks like current static map image service doesn't provide any parameter to pass that.
You are right. On static maps you can't send add custom overlays like in the javascript api. But maybe you can consider this as work around, you Add custom markers on your map URL.
You can use up to five unique custom icons per request. This limitation does not mean that you are limited to only 5 marked locations on your map. Each unique icon may be used with more than one markers location on your map.
Icon format:
Icon images may be in PNG, JPEG or GIF formats, though PNG is recommended.
Icons may be up to 4096 pixels maximum size (64x64 for square images).
I know it is possible with Google Map API v3 (MapTypeStyler option) but do you think it is with Leaflet API ?
Thing is that I have text that cover a map I need to make more visible by adjusting brightness or - even better - by applying blur effect like in this example : http://www.hongkiat.com/blog/css-filter/
CSS shader looks very promising but supported only with latest Chrome browser.
The text over the map is modal (user must interact with button) and I could add overlay with a PNG image file. I don't like to much this solution that need unnecessary file to be transfered to the client.
Thank you,
Leaflet is very lightweight and simply puts references to tile images on your html page. So I see two options to change the look of the tiles:
CSS
Which indeed depends on the browser.
Custom tiles
Leaflet will display tiles from any server. You can for example pick one of the many styles served by cloudmade or make one of your own there.
Or use a tool like TileMill to create (and perhaps even host) them yourself.
I'd like to replicate the outline effect shown on this map: https://maps.google.co.uk/maps?hl=en&safe=off&q=switzerland&ie=UTF-8&hq=&hnear=0x478c64ef6f596d61:0x5c56b5110fcb7b15,Switzerland&gl=uk&ei=PXO3UK3UPMS1hAfmjoDgBQ&sqi=2&ved=0CKQBELYD
In other words, I'd like to draw a path that:
is shown along one side only of the path defined in GeoJSON
fades in transparency from the outer side of the path to the inner?
Are either of these things possible with the Google Maps API?
I believe to do this you would need to create a custom overlay - which can be a somewhat daunting task. See the documentation on Custom Overlays for a basic example.
Were I implementing this, I would create an overlay which used HTML5 canvas elements as tiles.
I'm having difficulty drawing lines on top of an uploaded "map.gif" image.
Basically I've upload a small outline map and use the "area" function to create defined areas (cities, roads, etc). When I click on a city a snall pop up gets displayed with the word "hey, you've just click on Dallas" (or where ever). All that works just fine.
My problem is that my map is actually just a blank outline with no actual cities or roads drawn on it.
Therefore I tried using the "canvas" function to draw the cities (circles) and roads (lines).
The only problem is that they appear below the map rather than on top of it.
Any ideas as to how I can get the lines to appear on the map?
Many thanks,
Pete
You might just have to try playing with the CSS z-index values of the image and canvas.
Do make sure you set the canvas to be transparent.
An other possibility is to replace the image with the canvas (or just load the image in the canvas to begin with).
For some hints on how to use images with canvas take a look here.
I would load the gif directly in the canvas memory, and then do all the rest inside the canvas itself.
The gif is not animated, right?
Some reference about loading: https://developer.mozilla.org/en/Canvas_tutorial/Using_images
I have a marker of a rocket on one of my Google Maps apps. Not surprisingly, I need to rotate it depending on where it's headed. How can I do that? Rotating the image with a canvas/VML (like jquery-rotate does) appears to be not an option, because I need to specify a URL as the image source, not an <img> element.
The best cross browser way would be to create a sprite with the marker at different angles, and vary the Marker's size attribute depending on the angle.
The other non-cross browser way would be to use CSS3 transforms, and you'd probably want to create a custom Overlay in order to do this. Alternatively, draw onto the map with canvas. Though, you won't get a dom element to capture click events.
You can make more versions of that image (for the rotations) and use the url of the image you want.