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 trying to make a simple example work on my local environment. I want to make a map on my website, but once I downloaded the necessary files I've got strange problems. First, I had to add for the example script link the 'type="module"' code, which is already made me crazy. Nobody tests these applications, or my environment is so special? Why are they even using the import tag, if it's not working in the most used browser like a charm?! After I extended the example code and changed the import links to be fine for my environment (ol/Map.js to /ol/Map.js), now I've got this error you can read in the title. Failed to resolve module specifier "rbush". What can I do? I have no idea. There must be a main point I have missed. The example (https://openlayers.org/en/latest/examples/simple.html) works fine online on openlayers.org, but If I follow the instructions It don't on my end. Why?
OpenLayers 5.1.3 is meant to be used with the npm package manager as described here:
https://openlayers.org/en/latest/doc/tutorials/bundle.html
To use it without including the dependencies and "building" it, see the quick start page in the documentation:
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
working example of the "simple" example
I am using leafletjs inside a Spring MVC Framework app.
I want to use custom Icons using costum images for different icons.
This is the hierarchy of my project:
webaapp
--- core
-------- css
-------- js
-----------images (leafletjs images)
Here the code
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/core/css/leaflet.css" />
<title>leafletjs</title>
</head>
<body>
THIS IMAGE IS OK, I CAN SEE IT:
<img src="${pageContext.request.contextPath}/resources/core/images/marker-icon-2x-blue.png"/>
<div id="mapid" style="width: 800px; height: 600px"></div>
<script src="${pageContext.request.contextPath}/resources/core/js/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
maxZoom: 18,
attribution:
'osm',
id: 'mapbox.streets'
}).addTo(mymap);
var greenIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
redIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-red.png'}),
blueIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-blue.png'}),
yellowIcon = new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-yellow.png'});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.49, -0.091], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
L.marker([51.48, -0.092], {icon: greenIcon}).addTo(mymap)
.bindPopup("").openPopup();
L.marker([51.47, -0.098], {icon: greenIcon}).addTo(mymap)
.bindPopup(" ").openPopup();
var popup = L.popup();
</script>
</body>
</html>
If I don't custimaze the image I see that the default marker icon is here and it shows up perfectly:
http://localhost:8080/myApp-1.0-SNAPSHOT/resources/core/js/images/marker-icon-2x.png
but for the custom ones I've tried several things without success:
new LeafIcon({iconUrl: '${pageContext.request.contextPath}/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: '/resources/core/js/images/marker-icon-2x-green.png'}),
new LeafIcon({iconUrl: 'resources/core/js/images/marker-icon-2x-green.png'}),
adding an alert('${pageContext.request.contextPath})' within the inner content of my script to see what it resolves, the message is the contect name of my Application: /myApp-1.0-SNAPSHOT
I also tried with
<spring:url value="/resources/core/js/images/marker-icon-2x-green.png" var="myImage" />
var greenIcon = new LeafIcon({iconUrl:'${myImage}'})
it didn't work either, even in the JSP works perfectly
EDIT following edits 8-12 of the question:
Alright, If I understand correctly, you added your custom icon images in the same images folder as Leaflet default icon?
In that case, you could take advantage of Leaflet default icon image automatic path resolution L.Icon.Default.imagePath to build your own path.
I guess something like:
new LeafIcon({iconUrl: L.Icon.Default.imagePath + '/marker-icon-2x-green.png'});
Where do you define your LeafIcon?
What does '${pageContext.request.contextPath}' resolves to within the inner content of your script?
Have you tried 'resources/core/images/marker-icon-2x-green.png'? (notice the absence of leading slash)
I have a Blogger page with an embedded Google map which works fine. When I try to use Google's Javascript API to add a KML layer on top of the map the map becomes entirely black apart from the navigation controls. If I set the kml layer back to null the underlying map appears again.
I have tested the exact same code in a local environment and it works fine. So the issue is with embedding the code within a Blogger page.
Below is my html and js. Does anyone have any idea what the issue might be?
Note that the example kml file I'm using below is just a skeleton without any placemarkers, but I've tried it with other kmls and got the same result.
<html>
<head>
<style type="text/css">
#map-canvas {
height: 480px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3" type="text/javascript"/>
<script type="text/javascript">
function initializeMap() {
var centre = new google.maps.LatLng(35.5906421,37.6945915);
var mapOptions = {
zoom: 3,
center: centre,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var layer = new google.maps.KmlLayer({
url: 'http://trackmytour.com/Dpxc9.kml',
preserveViewport: true
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>
</head>
<body>
<p>
Here is where I'll be tracking my progress.<br>
<br>
<br>
</p>
<div id="map-canvas"/>
</body>
</html>
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