I am working on a mobile-friendly geolocation web app for backpackers. I already use D3 for data vis and Leaflet to navigate Google Maps (and other map layers). My app has features for offline use, such as saving coords to localstorage then uploading them when an internet connection is found.
I'm currently considering using d3 to plot GPS coordinates onto an svg map projection, effectively allowing me to have an offline world map which can display the users approximate location. Here are 2 demo's I've found which use GPS coords:
http://www.kgryte.com/gists/d3/maps/places/
http://dwtkns.com/pointplotter/
My question is: Would it be possible to integrate something like the d3 globe in the first link with Leaflet as a Layer?
My reason for this is I would use the SVG map as a backup for offline use, but I'd like to get Leaflet to handle markers, marker popups, zooming etc. I would get both solutions working off the same dataset for marker locations and content, so it's 'just' a case of swapping out the map.
Are there any demos/plugins for something like this? Is Leaflet only for tile-based maps?
Related
I am currently using Fabric JS but I dont like the layer/group implementation there but beside of layers fabric js has something useful I cannot find in konva js at the moment: viewports. How much work would it to implement zooming to a certain point (most often the mouse cursor) and also emit mouse events with transformed coordinates?
Use case: I would like to zoom in on a the top most layer and use drawing tools to draw on the zoomed area, so the mouse event coordinates need to fit accordingly.
Thank you :)!
I managed to get it working just by using some demo code and one coordinate scaling, great!
I would like to recreate bent country labels according to the area of the country.
In d3 (or SVG) I can construct a polyline and then use a textpath to have text along it. Example: https://www.w3.org/TR/SVG2/images/text/text-path-startoffset.svg
Is it possible in Cesium to do something similar?
In Leaflet it is implemented like that: http://makinacorpus.github.io/Leaflet.TextPath/
There's no native support for that in the current version of Cesium. It may be mentioned on a wishlist or on a roadmap somewhere, but there are no short-term plans that I know of to add it to Cesium.
Even so, you may be able to find a workaround. For example, SVGs can be used as texturemap image sources in Cesium, so you could possibly use D3 to produce curved text on-the-fly and load the results into a Cesium billboard image or even a Cesium Globe inlay image. It would probably take some experimenting to figure out how to actually wire this up and how well it would work.
I'm trying to clip an image overlay in Google Maps API, however without success. I can clip a HTML image successfully and overlay it on a Google MAP by using the CSS clip property and z-index property, however that's no use, as the image does not adjust to the Google map zoom and movements. i.e. the image is not bound to the Google MAP object in any way, doesn't respond to map changes.
If I assign the Google Map overlay to the cropped image source, it simply uses the original un-cropped source and not the cropped page image element. That's just how the image.src property works.
I successfully added an image overlay for Google MAPS, but there does not seem to be any clipping or cropping function for them. There is text on the image that I don't want to display for this application, but I don't want to crop the original source file image, as it's used for multiple display purposes.
historicalOverlay = new google.maps.GroundOverlay(imageurl,imageBounds);
historicalOverlay.setMap(map);
I need imageurl to point to a clipped version in memory or something like that or the clipped form image element, but not its un-clipped source image. Any ideas ?
The GroundOverlay class in Google Maps javascript API V3 does not provide any support for in-browser clipping/cropping of the image before display.
Because we needed that capability, plus some others like image rotation and non-rectangular images, we wrote a GroundOverlayEX javascript class that supports everything that the Google Earth version of GroundOverlay supports, including browser-side clipping/cropping of the image to-be-displayed.
The javascript class is open-source on Github at: https://github.com/azmikemm/GroundOverlayEX. There is API documentation as well (documentation.txt). All images shown by the GroundOverlayEX class are integral to the map, and will drag with the map, and zoom with the map.
A working functional example of the class in-action (with some clipped/ cropped images) is at: https://sites.google.com/site/issearthatnight/
If you turn off the VIIRS checkbox, and set the transparency down to midway, you'll see the images pretty plainly, and see that some are cropped (all are stored in NASA's servers as rectangles, so images that are square-ish or look like slices have been cropped by the GroundOverlayEX class).
I am trying to create a choropleth using d3 for New Jersey state. I have geojson file created as nj.json. You can see it here:
http://mntest.elasticbeanstalk.com/nj.json
When I try to use it to display on web page, it shows a very small New Jersey map, so small it is easy to miss. See it here:
http://mntest.elasticbeanstalk.com/choropleth_test.html
It shows as a small dot a couple of inches below the text.
Can somebody take a look at the source code and guide me how to increase the map size.
Thanks,
D3 newbie
To change the size of the displayed map, set the scale factor of your projection. You might also want to reset the center of the projection to center what you want to show.
This question might be helpful as well.
For a project we are wishing to use use openlayers. I know how to plot points and have a popup bubble. However since there is going to be quite a lot of points plotted on the map for the UK. What i am wanting to do is send the central point of the viewable area and in the backend send a layer update of all the points in the current viewable area. In openlayers is there anyway of doing this?
Yes. You can either use a WMS server to serve maps as images, or use the BBOX Strategy to only get the content within the viewport.