So, i'm new on leaflet.js and i'm trying to present two different leaflet maps on two different pages of my website, i.e, map 1 on page A and map2 on page B.
If i present both map1 and map2 in the same page works well, but when i try to present each one on one page, the second doesn't appear.
Some one can help me with this?
Thank you
Code for my second page of the website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="app/scss/style.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title>Circuit A - Predefined Circuits</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: #ffffff; }
</style>
</head>
<body>
<header class="header">
<div class="overlay has-fade"></div>
<nav class="container flex flex-jc-sb flex-ai-c">
<a href="index.html" class="header__logo hide-for-mobile">
<img src="images/logo_desktop.png" alt="POCITYF"/>
</a>
<a href="index.html" class="header__logo hide-for-desktop">
<img src="images/logo_mobile.png" alt="POCITYF"/>
</a>
<a id="btnHamburger" href="#" class="header__toggle hide-for-desktop">
<span></span>
<span></span>
<span></span>
</a>
<div class="header__links hide-for-mobile">
HomeNetwork<b>Predefined Circuit</b>Create Circuit<a target="blank" href="https://www.evoraticket.pt/OBilhete.aspx">Tickets</a><a target="blank" href="https://pocityf.eu/">About</a>
</div>
<!-- Request Invite -->
</nav>
<div class="header__menu has-fade">
Home
Network
<b>Predefined Circuit</b>
Create Circuit
<a target="blank" href="https://www.evoraticket.pt/OBilhete.aspx">Tickets</a>
<a target="blank" href="https://pocityf.eu/">About</a>
</div>
</header>
<!-- Editar para baixo -->
<section class="bar container--images"></section>
<section class="info_circuits">
...
<section class="info_circuits__map">
<section class="maps">
<div id="mapcircuit"></div>
</section>
</section>
</section>
...
<!--<div class="attribution">
Coded by UNINOVA
</div> -->
<script src="app/js/script.js"></script>
<script src="app/js/map_circuita.js"></script>
</body>
</html>
Code of maps.js
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapid').setView([38.57156160678178, -7.908692129122894], 16);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
iconUrl: 'images/position.png',
iconSize:[60, 40], // size of the icon
iconAnchor: [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)
.bindPopup('Casa')
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapcircuit').setView([38.57156160678178, -7.908692129122894], 16);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
iconUrl: 'images/position.png',
iconSize:[60, 40], // size of the icon
iconAnchor: [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)
.bindPopup('Casa')
Name your map instances different:
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('mapid').setView([38.57156160678178, -7.908692129122894], 16);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// add a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
iconUrl: 'images/position.png',
iconSize:[60, 40], // size of the icon
iconAnchor: [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(map)
.bindPopup('Casa')
// create a map in the "map" div, set the view to a given place and zoom
var mapcircuit= L.map('mapcircuit').setView([38.57156160678178, -7.908692129122894], 16);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mapcircuit);
// add a marker in the given location, attach some popup content to it and open the popup
var greenIcon = L.icon({
iconUrl: 'images/position.png',
iconSize:[60, 40], // size of the icon
iconAnchor: [30, 40], // point of the icon which will correspond to marker's location
});
L.marker([38.57266152778955, -7.907425130974091],{icon:greenIcon}).addTo(mapcircuit)
.bindPopup('Casa')
Be sure that your map has a CSS height and width, for example:
<div id="mapcircuit" style="height:100%; width:100%"></div>
Is the name of the javascript file map_circuita.js and not map.js?
Because of <script src="app/js/map_circuita.js"></script>?
Related
I try to create some feature with mapbox, where you get a view of the folder in jewelry. What I want to do is take a screenshot of the pendant with the map inside. The code I've made so far takes a screenshot, but I don't see the picture of the jewelry over
as you can see on picture I have map and on top of map I have this jewelry photo But When I try to screenshot I get just map, and if I try to screenshot some other div I dont get map. my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swipe between maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<script src="./html2canvas.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
type="text/css">
<div id="comparison-container">
<!-- mjenjanje dizajna mape -->
<div id="menu">
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" checked="checked">
<!-- See a list of Mapbox-hosted public styles at -->
<!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
<label for="satellite-v9">satellite</label>
<input id="light-v10" type="radio" name="rtoggle" value="light">
<label for="light-v10">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark">
<label for="dark-v10">dark</label>
<input id="streets-v11" type="radio" name="rtoggle" value="streets">
<label for="streets-v11">streets</label>
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors">
<label for="outdoors-v11">outdoors</label>
</div>
<div class="wrapper" id="wrapper">
<div id="before" class="map">
<!-- lijeva (svijetla strana) lancica i mape -->
<div class="lancic"></div>
</div>
<div id="after" class="map">
<!-- desna (tamna strana) lancica i mape -->
<div class="lancic-desno" id="aaa"></div>
<!-- slika koja ide preko tamne strane lancica -->
<div class="new-overlay-large gold" id="bbb" data-id="Necklace"></div>
</div>
<div id="geocoder" class="geocoder"></div>
</div>
</div>
<button onClick='printScr()'>Uslikaj</button>
<button onClick='capture()'>Uslikaj2</button>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = ''
// gdje je style stavis stilove koje si kreirao u mapbox studio before je za svijetlu mapu a after za tamnu (lijevu i desnu)
// gdje je center stavis kordinate gdje hoces pocetnu da ti se loade mapa
// gdje je zoom stavis koliko hoces da ti bude blizu mapa
const beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/mapbox/streets-v11',
center: [18.413370, 43.857114],
zoom: 10,
preserveDrawingBuffer: true,
});
const afterMap = new mapboxgl.Map({
container: 'after',
style: "mapbox://styles/selmanbecar/cl3kcwswk000014o518iwtue7",
center: [18.413370, 43.857114],
zoom: 10,
preserveDrawingBuffer: true,
});
// funkcija za mjenjanje dizajna mape
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
input.onclick = (layer) => {
const layerId = layer.target.id;
afterMap.setStyle('mapbox://styles/mapbox/' + layerId);
};
}
// A selector or reference to HTML element
const container = '#comparison-container';
const map = new mapboxgl.Compare(beforeMap, afterMap, container, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
// Add the control to the map.
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
document.getElementById('geocoder').appendChild(geocoder.onAdd(beforeMap));
const printScr = () => {
html2canvas(document.getElementById('after')).then((canvas) => {
let img = new Image();
img.src = canvas.toDataURL();
window.document.body.appendChild(img);
})
}
</script>
</body>
</html>
<!-- https://docs.mapbox.com/mapbox-gl-js/example/setstyle/ -->
Can anyone help in resolving this issue?, I am trying to create a map showing map markers of power plants in the US and also a heatmap later on. The problem with my code is that my map is not even showing when it goes live. I have attached the config, location and index files to help with finding the issue. I initially had a local csv file, which I converted to geojson which was then deployed on github.
config.js
// API key
const API_KEY = "pk.eyJ1IjoidGF1cmVhbmgiLCJhIjoiY2tmb21yc2tzMDFnYTJ0bXVuMzVub2tvYyJ9.vhUstehmvTj6HgfalepX8w";
location.js
var myMap = L.map("map", {
center: [37.7749, -122.4194],
zoom: 13
});
// Adding tile layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: "mapbox/streets-v11",
accessToken: API_KEY
}).addTo(myMap);
var url = "https://taureanh.github.io/geojson/";
d3.json(url, function(response) {
console.log(response);
for (var i = 0; i < response.length; i++) {
var geometry = response[i].geometry;
if (geometry) {
L.marker([geomtery.coordinates[1], geometry.coordinates[0]]).addTo(myMap);
}
}
});
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Map Markers</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<!-- Our CSS -->
<link rel="stylesheet" href="./static/css/style.css" />
</head>
<body>
<div id="map"></div>
<!-- API key -->
<script type="text/javascript" src="static/js/config.js"></script>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet#1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<!-- D3 CDN -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- JS -->
<script type="text/javascript" src="static/js/location.js"></script>
<!-- <script type="text/javascript" src="static/js/heatmap.js"></script> -->
<!-- Leaflet heatmap plugin-->
<script type="text/javascript" src="static/js/leaflet-heat.js"></script>
</body>
</html>
d3.json expects JSON, but your endpoint is returning HTML:
curl -I https://taureanh.github.io/geojson/
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
You should update your endpoint so that is actually returns JSON: content-type: application/json; just data, no <html> tags.
Alternatively, you could update location.js to get the endpoint (d3.request(url, function(html)), then parse the response into JSON yourself (strip the html tags, then use JSON.parse). This will work, but it's messy and not ideal.
Can someone help me put a nearby search on leaflet? Currently I only have Geocoding search and I want that when I search a place I can see nearby shops, medical centers, eatery, etc. within a range.
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.js"
integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
crossorigin=""></script>
<style>
#mapid{
width: 100%;
height: 400px;
}
</style>
<body>
<div id="wrapper">
<% include ../.././partials/nav.ejs %>
<ul class="breadcrumb">
<li>Home</li>
<li class="active">Dashboard</li>
</ul>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([37.0902, -95.7129], 4);
L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
var searchControl = L.esri.Geocoding.geosearch().addTo(mymap);
var results = L.layerGroup().addTo(mymap);
searchControl.on('results', function(data){
results.clearLayers();
for(var i =data.results.length -1; i>=0; i--){
results.addLayer(L.marker(data.results[i].latlng));
}
})
</script>
This is the line of code I currently have.
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
I'm trying to use the Google Maps API to get a single map to show. I'm using Javascript.
It should be a single page with one header and one map below the header. I signed up for the Google Maps API recently, so I'm not sure if it takes a certain amount of time for the API key to be active or not. I've got other CSS files and a googlemaps.js file that doesn't have anything in it yet.
Here's my code. Any ideas why it's not working?
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, intial-scale=1.0;'>
<title>API(s)</title>
<link rel='stylesheet' href='styles/semantic.min.css'>
<link rel='stylesheet' href='styles/main.css'>
</head>
<body>
<div class="ui two column centered stackable grid container">
<div class="column">
<h1 class="goog-header">Location Based Image Search</h1>
</div>
</div>
<div class="ui one column stackable grid container js-images-container">
<div class="column">
<div id="map"></div>
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXTmorapOu1WquB3VlsLrckhE45Bgfrfw&callback=initMap" async defer></script>
<script src='javascript/googlemaps.js'></script>
</body>
</html>
Try to change your map DIV to:
<div id="map" style="width:800px;height:600px"></div>