I have to add a click handler to the button provided that will retrieve the users current location using the geolocation api.
Here's my code, I'm trying to use geolocation to set the current location of the user to the map but the button for some reasons does not work. Can anyone point out what I'm doing wrong and help me out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
#mapid { height: 600px; }
</style>
<script>
const Mapping = {
map : null,
initializeMap : () => {
Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo( Mapping.map );
},
resetLocation : ({lat,lon}) => {
Mapping.map.setView([lat,lon], 13);
}
}
window.onload = () => {
Mapping.initializeMap();
userCode();
}
function userCode() {
// JS CODE START
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
Mapping.setPosition(pos);
Mapping.open(Mapping.map);
Mapping.map.setPosition(pos);
})
}
// JS CODE END
}
</script>
</head>
<body>
<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>
Use
Mapping.resetLocation({lat:pos.lat,lon:pos.lng});
Instead of
Mapping.setPosition(pos);
Related
Would someone be able to explain what I need to do to add an array of markers using javascript. I understand that basics of displaying the map and adding a marker or even multiple markers but they have to be hard coded in. I want to display a list of markers from an API.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>test</h3>
<div id="map"></div>
<style>
#map {
height: 800px;
width: 100%;
}
</style>
<script>
// Initialize and add the map
function initMap() {
// The location of L.A
var L.A = {
lat: 34.0503743841965,lng: -118.24525401223457
};
// The map, centered at L.A
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: L.A,
mapId: "hidden"
});
//here is where i am having trouble
//how can i turn this into an array of lat/lng that add a marker for each lat/lng?
var markerView = new google.maps.marker.AdvancedMarkerView({
map: map,
position: {
lat: 37.4239163,
lng: -122.0947209
},
});
}
window.initMap = initMap;
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=hiddenE&v=beta&libraries=marker&callback=initMap">
</script>
</body>
</html>
This is my first time working with a leaflet map in javascript, and I follow the instructions in the documentation but the map details don't appear.
This is what I get :
I search about that and found many codes that are also not working
this is my code :
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([38.738853, 0.039328], 13);
bounds = new L.LatLngBounds(new L.LatLng(38.589932205137842, -0.24943472068649825), new L.LatLng(38.834130125688162, 0.250210265053367));
L.tileLayer('http://tiles.primarysolutions.org/tiles/{z}/{x}/{y}.png', {
minZoom: 12,
maxZoom: 15,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
}).addTo(map);
</script>
</body>
</html>
Where is the problem in my code and why doesn't the map appear? How can I solve this?
Look into this default demo: www.leafletjs.com/edit.html
html:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
body {
margin: 0;
}
html, body, #map {
height: 100%
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript:
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
I'm using mapbox api.
I would ultimately like to display mapbox map in node.js sever.
Only html that contains texts is working, html that contains map script isn't working.
How do I solve this problem?
(example - index.html work but mapWeb.html doesn't work in index.js)
[index.js]
var http = require('http');
var fs = require('fs');
http.createServer(function (request, response) {
request.on('readable', function () {
request.read(); // throw away the data
});
request.on('end', function () {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.write(fs.readFileSync("./index.html"));
response.end('Hello HTTP!');
});
}).listen(8080);
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
Hello Node Server Routing Is Working.
</body>
</html>
[mapWeb.html]
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.js'></script>
<link href='C:\Users\YJH\Documents\Visual Studio 2017\Projects\mapServerTest\mapServerTest\node_modules\mapbox-gl\dist\mapbox-gl.css' rel='stylesheet' />
<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 = 'pk.eyJ1IjoiamhqaGpoOTYiLCJhIjoiY2oxaGpjMjF2MDAydDJ2b2F5cXFlM3QwYiJ9.CDgM2v_KGqdegjs-bK-Cnw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
</script>
</body>
</html>
I am trying to load a leaflet map from a link. If I click the first link, the map loads, then if I click the second link, the map does not load. Both links call the same function. I cannot understand what is happening.
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
function showMap(url){
var map = L.map('map').setView([-33.4387,-70.647], 14);
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
You are getting an error because your are trying to initialize the map container for a second. Here is how you can solve this:
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
</head>
<body>
OpenStreetMap<br>
Thunderforest<hr>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
function showMap(url){
if(!map)
{
map = L.map('map').setView([-33.4387,-70.647], 14);
}
var mapLink = 'OpenStreetMap';
L.tileLayer(url, {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
}
</script>
</body>
</html>
I am setting up a simple map program for a user to see locations on an embedded Google map. I have the map working, but I was wondering if there is a way for the user to input coordinates in AI2 then have the map center there.
Here is the HTML file I am using to display the map.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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?&sensor=true&language=en"></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
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', showPosition);
}
function showPosition(event) {
// display a marker on the map
marker = new google.maps.Marker({
position: event.latLng,
map: map,
icon: "./marker.png"
});
// print the selected position to the page title
var position = event.latLng.lat().toFixed(6) + ", " + event.latLng.lng().toFixed(6);
window.document.title = position;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Yes, that's possible.
You can use WebViewString to communicate values back and forth between your App and the WebViewer. In your App, you get and set the WebViewer.WebViewString properties. In your webviewer, you open to a page that has Javascript that references the window.AppInventor object, using its getWebViewString() and setWebViewString(text) methods.
See also the following snippet for a complete example.
<!doctype html>
<head>
<meta name="author" content="puravidaapps.com">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<script>
document.write("The value from the app is<br />" + window.AppInventor.getWebViewString());
window.AppInventor.setWebViewString("hello from Javascript")
</script>
</body>
</html>