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.
Related
I have a dwg (I can change the file format to svg or other formats if needed) file that I want to show on my web page. After this file is displayed in the page, I want to be able to zoom in, zoom out, pan and put links that request the api where necessary. In fact, it looks like information and links about the relevant place appear when you hover over the landmarks on Google maps.
How should I go about doing this job?
If you can translate the DWG file to DXF (there are several tools to do this) then you can use MapServer to render it on a web map compatible way. Have a look at MS4W for an easy way to install and configure MapServer on Windows. Since you want pop-ups, I'd recommend using Leaflet as the client side browser tool kit for providing pan, zoom, pop-ups etc to communicate to MapServer. figuring out the coordinate system of the DWG file will likely be the hardest part.
Use this method if integrating your DWG with other mapping data (roads, etc) is important. Otherwise look for something easier to implement.
There are libraries that let you easily zoom and pan an SVG image. For example svg-pan-zoom.
As for the links, you would need to do a bit of extra work. IIRC DXF files don't have the concept of a whole element that you could hover over. All the lines in the file are discrete object. So, if I am remembering that correctly, you may need to load the SVG into an editor and add elements on top of the diagram that correspond to your hover areas. They don't need to be visible. They can be transparent and still hoverable. You just need to then add the interactivity. Ie.
Optionally add hover effects with CSS.
Add a mouseover or click event handling to implement the link handling, or
use standard SVG <a> linking instead.
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.
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.
How can you use a custom tileset/overlay on a Google map, like was done here:
http://www.philaplace.org
That is pretty cool, and I would like to experiment with this.
There are a couple different ways to do it. One way is to create a GTileLayer object and implement the getTileURL() to return the URL pointing to your tiles.
But first you'll need an image that's cut properly in the tile format. For starters, I'd recommend you look at MapTiler: http://www.maptiler.org/ It will cut images for you AND generate a GoogleMap with the overlay.
You'll want to look at Google's Overlays (especially Custom Overlays) and Custom Map Types documentation for Version 3 of their Maps API.
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.