I'm trying to obtain a picture of a map using Mapbox. This should be very simple using
map.getCanvas().toDataURL(); The catch is that I have markers on my map and these are not present when I obtain the image using the method mentioned above.
This is an example of what I'm experiencing: https://codepen.io/loskiorama/pen/YzeeMqm
Is there any way I could get a "screenshot" of my map that includes the markers?
I'm bundling this on a single js file so I can't use solutions like html2canvas as I'd like to keep my file as small as possible.
Thanks!
Related
I searched a lot over internet but did not find correct solution for the problem. i have to display marker on google map using lat long . I have two images to display as marker one image will work as background and another small image will display over it how can i do this.I am using javascript map api for this.
Note: i can't use photoshop to make these two image as one
There is a Google maps utility library called RichMarker that allows you to use HTML DOM as markers. Using HTML and CSS you can embed your images.
Here is demo of the utility.
You might be able to implement the solution provided here
https://stackoverflow.com/a/1782662/1109352
You will be using imbedded CSS instead
I'm using Mapbox with Leaflet for drawing, editing and removing polygons etc. There might also be a case in which the user might have zipped shapefiles and want to use that directly, instead of drawing the polygons. So I'm using leaflet.shapefile to upload shapefiles and add them to the map.
But when I try to edit the shapefiles using the Leaflet Draw control, I get an error telling me that "i.editing is undefined". I tried converting the layer to GeoJSON before adding it to the featureGroup just in case (like in the code below), to see if that had any effect, but it didn't.
var layergeojson = layer.toGeoJSON();
featureGroup.addLayer(layergeojson);
This is a jsfiddle of what I have right now. I tried researching online to see any similar cases, but I'm not able to find any.
Is it possible to edit the uploaded shapefiles using the Leaflet Draw control?
When you do var layergeojson = layer.toGeoJSON(), the layergeojson now contains a plain GeoJSON object, not a Leaflet layer.
Therefore, featureGroup.addLayer(layergeojson) should throw an error (open your browser console). Instead, you should probably use the .addData() method: featureGroup.addData(layergeojson).
As for editing your resulting layers, it might be related to this: https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet/203773#203773
So, basic gist is, I have my own tiles of not the real world I'd like to display with the Google Maps viewer. I've found examples of how to split an existing single image into tiles for use with it, but nothing that deals with setting up your own tiler.
I have map data such as this:
https://dl.dropboxusercontent.com/u/44766482/superimage/index.html
Which right now is just a bunch of 1600x1600 images in an html table. This naive method works, but I'd like to switch to the more robust google api for better zooming and smarter streaming of the image data.
I've been unable to find a good example of how to generate your own tiles for the zoom levels and bring it together with some html/js.
If you want some more information for the goal process;
I have a python script that can output any size tiles of the map, at any zoom level. I'd like to bundle those together into a google maps api website. But in my own efforts I have not found a good example or documentation of how to do that. For one, I can only find examples of how the zoom levels work for the real world map, but not for a custom one.
Edit:
Got most things working as I want them, but I'm still confused regarding the "center" that can be set, as it's in lat and lng, which don't apply. I'd also like to set boundaries as currently it tries to load .png files outside of the maps range.
My current progress:
https://dl.dropboxusercontent.com/u/44766482/googlemapspreview/index.html
I think what you are looking for is the google maps imageMapTypes:
https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes
Basically, each zoom level is the 4 lower zoom tiles combined. A Projection function can be skipped to get orthogonal mapping.
I'm using ChartJS to include some maps in my website but the ChartJS library doesn't have the map I want.
I want to know if this type of vector maps is something easy to find free online or do you have to build from scratch?
ChartJS website isn't clear about that.
Thanks for your time!
From what I've noticed in vectormap-data/world.js file map data is an array of objects and each object has a coordinates field. It looks like each object corresponds to some country.
You may try to change those coordinates and see how this affects the map. Maybe, that will allow you to create you own map data.
Good luck!
I am using the Zingchart library to add a map and charts to my website.
For the Map there are some predefined maps included in the library. Is there a way I can define my own map? I am looking for a way to enter the coordinates of the polygons
I want with their name, and they get loaded.
I tried too see how they are done by looking at the source code but I have the minified version and its not very intuitive to figure out how to modify them.
The Zingchart Maps Module docs include a handful country maps as demos. As you said, these are the predefined maps the library comes with. If you load up one of the maps (on their docs page) and right click, their custom context menu should show the option "view source", amongst other export options. Within the result window, you will see the Parsed JSON tab. This JSON object defines the map. For example, an excerpt of Argentina's map definition looks like this:
...
{
"type":"poly",
"id":"NQ",
"points":[[183,180],
[183,181],
[184,182],
[185,182],
[185,183],
[185,184],
[186,185],
[186,185],
...
In order to define you own map, you simply need to mirror this structure. Start by cloning any of the included maps and substitute in your own values for points.
Hope that helps.