I am just starting out with javascript and I am trying to create an interactive web map....
I want to be able to position the map then press a button that will take a screenshot and save it to the computer.
Here is the code for my map.....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '[TOKEN]';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/charlie-enright/cl5b8bjil002y14o5u8xrssah', // style URL
center: [-4.369240916438415, 51.925803756014965], // starting position [lng, lat]
zoom: 8, // starting zoom
projection: 'globe' // display the map as a 3D globe
});
map.on('style.load', () => {
map.setFog({}); // Set the default atmosphere style
});
</script>
</body>
</html>
I have tried using html2canvas (https://codepen.io/samsammurphy/pen/VXdOPv) but the button seems to end up in a layer behind my map and I can not take a screenshot of the displayed map.
Any ideas how I could create a button that allows for a screenshot to be taken which saves to the computer will be greatly appreciated.
Thanks,
Here's an example of using map.getCanvas().toDataURL() and then injecting an img tag into the DOM. (This is not my example, I found it on this codepen by Sam Murphy https://codepen.io/samsammurphy/pen/VXdOPv)
$('button').click(function() {
var img = map.getCanvas().toDataURL();
var width = $('#screenshotPlaceholder').width()
var height = $('#screenshotPlaceholder').height()
var imgHTML = `<img src="${img}", width=${width}, height = ${height}/>`
$('#screenshotPlaceholder').empty();
$('#screenshotPlaceholder').append(imgHTML);
});
});
The codepen I found this on was not working due to an expired access token, so here's a fork that works if you want to try it out.
https://codepen.io/chriswhong/pen/YzapomG
Here's the code I use to take map screenshots using html2canvas
html2canvas(document.getElementById("map"), {useCORS:true}).then(canvas => {
var pseudolink = document.createElement('a');
pseudolink.download = 'myMapScreenshot.png';
pseudolink.href = canvas.toDataURL()
pseudolink.click();
})
I'm doing a soccer app using rails on this. The framework i'm using is bootstrap. For some reason when I load my page my google map is appearing grey. Please help me get the map to properly function. My plan is to get it to display the map and show markers of parks nearby you. Here is my code: Code
<div id="map"></div>
<script>
function initMap(){
// map options
var options = {
zoom:8,
center:{lat: 440.7203,lng:-73.8812}
}
// new map
var map = new google.maps.Map(document.getElementById('map'), options);
// add marker
var marker = new google.maps.Marker({
position: {
lat:40.6782,
lng:-73.9442
},
map:map
})
}
setTimeout(initMap, 10)
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMt_iOISz_BWdQJp0SlJfqoVwV_BHSvM">
</script>
<h1>Park.scss</h1>
#map{
height: 300px;
width: 100%;
}
Try using the style as per below:
#map * {
overflow:visible;
}
I'm trying to put a Google Map inside a Bootstrap content-tab (this). This is my code for the map:
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
this is where I place the map_canvas div:
<div class="tab-content">
...other divs here...
<div class='tab-pane fade' id='contact'>
<div class="row">
<div id="send_email" class='span4 pull-right'>
...blablabla a form here...
</div>
<div id="information" class='span8'>
<ul>...contact info...</ul>
<div id="map_canvas"></div>
</div>
</div>
</div>
This is the code for the divs:
$('#navtabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
Really, nothing special about it. Yet for some reason the map is off to the side, and looks like this:
If I try and move it it just auto-fixes itself to be half-outside like in the picture. ommiting bootstrap.css solves the problem. Putting #map_canvas outside the content-tabs also solves the problem. Yet I can't tell exactly what's screwing it up.
It isn't related to the max-width issue as suggested here, since I'm using bootstrap is 2.3.2 which addresses it and includes these lines by default (adding them to my own css doesn't help either):
#map_canvas img,
.google-maps img {
max-width: none !important;
}
I tried playing with chrome developer tools and scanning the divs and its parents, I went over the .tab-content inside bootstrap css, I tried ommiting the entirety of the img attributes inside the bootstrap.css, I tried many other solutions from SO, to no avail.
Any help would be much appreciated.
I had a hacky solution for this issue when this was happening to my map in a bootstrap modal.
When the the tab (or modal in my case) content has finished loading call:
google.maps.event.trigger(MAP_OBJECT, "resize");
And optionally:
MAP_OBJECT.setCenter(center);
Admittedly, the map for a brief moment looks the way it does in your screen shot and then looks normal.
Sorry I don't have a definitive fix for you!
I had the same problem. Joseph's solution will work if you'll bind to the shown event instead of click.
#freakycue was right. I needed to do Joseph's answer but bind it to the shown event.
This is what ended up working for me:
$("#navtabs a").on("shown", function(e) {
google.maps.event.trigger(MAP_OBJECT, "resize");
});
I've written an R script to create a KML file and the resultant KML below loads icon18.png fine when viewed in Google Earth:
<kml xmlns:xsd="http://schemas.opengis.net/kml/2.2.0/ogckml22.xsd" xmlns:xmlns="http://www.opengis.net/kml/2.2/" version="1.0">
<Document>
<name>Member locations</name>
<open>1</open>
<Folder>
<name>SpatialPointsDataFrame</name>
<Style id="pnt1">
<IconStyle>
<Icon>
<href>http://maps.google.com/mapfiles/kml/pal2/icon18.png</href>
</Icon>
</IconStyle>
<BalloonStyle>
<text>$[description]</text>
</BalloonStyle>
</Style>
<Placemark>
<name>1</name>
<styleUrl>#pnt1</styleUrl>
<Point>
<extrude>1</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>151.26250,-33.89374,0</coordinates>
</Point>
</Placemark>
</Folder>
</Document>
</kml>
However when loaded into a KmlLayer using the maps API and the following code it displays as the default blue 'teardrop' marker:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://www.peter-johnson.com.au/test.kml');
ctaLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Looking at other questions here I could only see ones posted without code that went unanswered or some related to the web server not being publically available.
A few indiciated there problem was now OK so I guess loading custom icons into a KmlLayer is supported but I have some problem with the KML format or the way I'm loading it?
As suggested in a comment I've just placed the KML in a publically available area here:
http://www.peter-johnson.com.au/test.kml
And here is the HTML:
http://www.peter-johnson.com.au/test.htm
The KML you have posted doesn't work with either Google Maps or KmlLayer even after I make it validate
Your KML on Google Maps - Blue default marker
Your KML on Google Maps API v3 map - Blue default marker
For what it is worth, it does work with geoxml3
Your version does have an invalid schema (at least according to feedvalidator)
UPDATE:
The problem is with the location of the definition of the shared styles.
This works and on Google Maps
The Style definition didn't work where you had it. Shared styles look like they have to be in a Document.
I have successfully imported a kml file to a Google map so that it displays real estate boundaries.
I have also used the tutorial at https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays to draw simple polygons and have them click-able.
However, I don't know how to make the polygons created by the kml file click-able. The polygons on the kml are quite complex shapes and consist of many coordinates to form the polygons. The example below is just for 1 real estate boundary:
-83.6530304633209,34.8237504877659,0 -83.65536046332301,34.8248804877671,0 -83.65672046332431,34.8262904877683,0 -83.6567504633242,34.8271904877693,0 -83.655330463323,34.8308304877725,0 -83.6565104633242,34.8333304877749,0 -83.65765046332511,34.8349204877764,0 -83.6571104633247,34.8383604877794,0 -83.6591604633265,34.8443604877853,0 -83.6588104633263,34.8468904877875,0 -83.6591604633265,34.8507504877912,0 -83.6583904633258,34.8543804877945,0 -83.6569404633244,34.8566604877968,0 -83.65475046332242,34.8599504877998,0 -83.6545604633223,34.8610404878007,0 -83.6543204633219,34.8635704878032,0 -83.65568046332331,34.8684104878075,0 -83.6553904633231,34.8695004878086,0 -83.6546604633224,34.8706904878097,0 -83.654380463322,34.872050487811,0 -83.6552304633228,34.8745504878134,0 -83.65494046332262,34.8759104878145,0 -83.65377046332161,34.8768304878154,0 -83.6504704633185,34.8796104878179,0 -83.64877046331689,34.8814504878196,0 -83.6469204633151,34.8849204878229,0 -83.6450204633134,34.8870304878249,0 -83.64227046331081,34.8897904878275,0 -83.6389204633076,34.8911304878288,0 -83.6344604633034,34.8921304878297,0 -83.6330604633022,34.8926104878301,0 -83.6295204632988,34.8948504878322,0 -83.6278404632974,34.8969604878341,0 -83.6273304632969,34.89832048783551,0 -83.62726046329681,34.8994904878366,0 -83.6286904632982,34.9030704878399,0 -83.6287304632981,34.9045104878412,0 -83.62844046329791,34.9056004878421,0 -83.6268704632964,34.9077104878443,0 -83.6256904632953,34.9086304878451,0 -83.6240704632939,34.9091204878455,0 -83.6226304632926,34.9088804878452,0 -83.6204304632904,34.9083904878448,0 -83.6179704632882,34.9100604878463,0 -83.61680046328711,34.9109904878471,0 -83.6157204632862,34.9116404878477,0 -83.61126046328189,34.9123704878484,0 -83.610200463281,34.91347048784951,0
These coordinates do not work when i manually convert them into latlng pairs and insert them into the Google tutorial above like so:
new google.maps.LatLng(-83.6530304633209,34.8237504877659),
new google.maps.LatLng(83.65536046332301,34.8248804877671),
new google.maps.LatLng(-83.65672046332431,34.8262904877683),
new google.maps.LatLng(-83.6567504633242,34.8271904877693)
Anyone have any ideas on how I can either make the kml layer polygons click-able or use the kml data to redraw the polygons and make them click-able?
Thanks
edit: This is the code i'm using to load the kml:
<!-- Declare the application as HTML5 using the <!DOCTYPE html> declaration -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!-- include the Maps API JavaScript using a script tag -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAaWOu7N4OX8BlYUwZhvWP2V0P6YQryN9Y&sensor=true"></script>
<script type="text/javascript">
function initialize()
{
<!-- create a JavaScript object literal to hold a number of map properties -->
var myOptions =
{
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
fillColor: '#0000ff'
};
<!-- a JavaScript function to create a "map" object -->
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var myLayer = new google.maps.KmlLayer('http://www.domain.com/gmaps/1.kml',{suppressInfoWindows: true,map: map});
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions({fillColor: "#000000"});
}
);
google.maps.event.addListener
(
myLayer, 'click', function(kmlEvent)
{
var text = kmlEvent.featureData.description;
showInContentWindow(text);
}
);
google.maps.event.addListener
(
myLayer,"mouseover",function()
{
this.setOptions
(
{
fillColor: "#000000"
}
);
}
);
function showInContentWindow(text)
{
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
}
</script>
</head>
<!-- initialize the map object from the body tag's onload event -->
<body onLoad="initialize()">
<!-- create a div element named "map_canvas" to hold the Map -->
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>
Unfortunately, you don't get a mouseover event with the KmlLayerapi-doc; check at the api-doc, scroll down a bit to see the Events, and all you get for events are: click, defaultviewport_changed, and status_changed. I have also explored the options that are available because the KmlLayer is an MVCObjectapi-doc, but that doesn't offer additional events. I don't think this is possible.
There may be another way to achieve what you want, but I haven't found it; let's see what others may be able to add.
Using KmlLayer, you can't change the properties of the Polygons. If you use a third party KML parser like geoxml3 or geoxml-v3 to render the polygons as native Google Maps API v3 objects you can change their properties (but whether the performance is acceptable will depend on how complex your KML is). You can also dynamically change Polygons in tiles rendered using FusionTablesLayer (import your KML into a Fusion Tabel).
Example changing the color of Polygons from KML rendered using geoxml3 on mouseover