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.
Related
I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
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 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.
So basically what i'm trying to achieve is this functionality in google maps v3,that they have in openlayers: http://dev.openlayers.org/releases/OpenLayers-2.11/examples/image-layer.html
Hide the base layer of googlemaps (the actual map), and then add a image overlay that is placed over the entire surface of the map.
Is this possible? and do anyone have any solutions at hand?
It's called a GroundOverlay: https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay
However, while a GroundOverlay covers the base map, it does not remove it. You'd need a custom map type for that: https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
It would be fairly easy to develop a custom map type that always returns a blank tile.
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!