Using Leaflet map in php page - javascript

I was searching for free maps as an alternative to google maps to use in my website. As I searched I found leaflet. Referring the tutorial I tried creating a simple map in my localhost. But its loading blank. I am using leaflet for the first time. Is there anything I am missing out in my code? Can anyone help me..? Thanks in advance.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
</script>
</body>
</html>

You need to add a tile layer to your map and try using one of the latest leaflet versions, such as 1.3.3. Moreover set a height like this:
#map{ height: 500px }
Try this
var map = L.map('map').setView([43.64701, -79.39425], 15);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
#map {
height: 500px
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet#1.3.3/dist/leaflet.js
'></script>
<div id="map"></div>

Related

Geojson File not aligning with map correctly

I have a geojson file that I'm trying to add to a map but for some reason, they are misaligned.
I have made this simplified version of the page, removing all my markers and all other HTML to try to isolate the problem but with no joy.
I've tried
Loading the Geojson on the page in <script> tags like the leaflet JS tutorial shows
Saving the Geojson in a folder on my site and calling it to load with JavaScript
And with the link, you see below I've used fetch to get the API
http://codeyeti.co.uk/ActiveCommuters/map_dev.php
They all return this same misaligned result.
the Geojson file can be viewed on Maptiler where it displays perfectly
https://cloud.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/#9.19/53.2826/-4.3682
here is my code
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([53.309242,-4.626208], 10);
L.tileLayer('https://api.maptiler.com/maps/openstreetmap/{z}/{x}/{y}.jpg?key=g9ErshPDnj0LYYtEd10o', {
attribution: '© MapTiler © OpenStreetMap contributors',
}).addTo(map);
fetch('https://api.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/features.json?key=g9ErshPDnj0LYYtEd10o')
.then(function (responce) {
return responce.json();
})
.then(function (data) {
L.geoJSON(data).addTo(map);
});
</script>
</body>
</html>
Has anyone had trouble like this?
misaligned result by style.css line 271 :
img {
margin: 10px 0px;
}
you can check it
Map of leaflet is a group images

issue implementing a map into HTML file using leaflet CSS and JavaScript files

I am working on my assignment and I was wondering if you can point out the mistake that I am committing in my code.
For this assignment, I am building a map with a third-party library and API.
The steps were to:
Request an access token from Mapbox (Links to an external site.)
Generate an HTML 5 document.
Reference the leaflet CSS and JavaScript files.
<link rel="stylesheet" h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
Set the map view to the following coordinates: Latitude: 39.678121 Longitude: -104.961753.
Add a zoom level of 15.
Add a tile layer and apply a max zoom of 20.
Add a marker using the provided coordinates.
So far, this is what I have:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic map</title>
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="css/leaflet.css">
</head>
<body>
<div id="map"></div>
<script src="js/leaflet.js"></script>
</body>
</html>
CSS
/* required styles */
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
JS
L.mapbox.accessToken = 'pk.eyJ1IjoicmVkYnVsbDg0IiwiYSI6ImNrZGNvYm9qeDB6cW0ycW16MmF0Y2szbW0ifQ.Fru8Yiy4GdL66v3o7769zg';
var map = L.mapbox.map('map')
.setView([39.678121, -104.961753], 15)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
// L.marker is a low-level marker constructor in Leaflet.
L.marker([39.678121, -104.961753], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'college',
'marker-color': '#fa0'
})
}).addTo(map);
L.tileLayer('https://stamen-tiles-{S}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors, CC-BY-SA',
}).addTo(map);
For some reason, the HTML file will not load ( blank page) using the following in the head section of the HTML document:
<link rel="stylesheet" h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
However, I was able to get the HTML file to load using the following links in the head section of the HTML document:
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
Can you please assist with correcting this issue and other issue that you may have spotted?
Your link & script tags are missing href & src attributes:
<link rel="stylesheet" href="h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
If it still doesn't work let us know where you got this path from:
"h..t#1.6.0/dist/leaflet.css"

How to make a javascript pop-up send me to a .cshtml page?

I'm kind of new at working with both c# and javascript and i'm not sure how can i open a .cshtml page from a javascript pop-up. So basically i have a map on which i have 2 pins ( for the moment ), which represent parking lots in my city. I want to create a "View details" button in the pop-up which will redirect me to a new page.
Here is mai .cshtml page:
#model ProiectColectiv.Models.User
#{
ViewData["Title"] = "Admin Map";
}
<!DOCTYPE html>
<style>
html, body, #map-container {
height: 100%;
}
#mapid {
height: 94vh;
}
.header {
left: 80px;
position: absolute;
top: 9vh;
z-index: 401;
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map</title>
<link rel="stylesheet" href="~/css/map.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
</head>
<body>
<h1 class="header">
Hello, #Model.Name!
</h1>
<div id="mapid"></div>
</body>
</html>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<script>
var mymap = L.map('mapid').setView([46.776, 23.594], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 12,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
var marker = L.marker([46.770, 23.592]).addTo(mymap);
marker.bindPopup("Parcarea Adminului. View Details");
L.marker([46.7825, 23.6880]).addTo(mymap).bindPopup("Parcarea lu varu!");
</script>
My question is, how can i make this connection?
And also, if anyone has any idea if there is any Google Maps API for parking lots in different cities, please let me know.

Why can't Google Maps API access custom CSS file from JS in HTML file?

HTML with JS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-ksdsad&callback=initMap"></script>
<script>
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
</div>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
The specific problem is that when I put CSS in the HTML with #map the map shows and works but from the separate file it just doesn't show. Why?
EDIT: Making a MVC application via Visual Studio
EDIT 2: Something with the file location was wrong. I created a new project and put the CSS in a file that was already made. Now it's working.
First things first - put your script tags into head and try again. I suspect that there's some funky stuff with google maps replacing contents of #map and removing scripts in the process.
It should be <link rel="stylesheet" type="text/css" href="./css/custom.css" /> Use . insteads of ~

google maps not displayed correctly unless refreshing

I am using JQuery mobile with the Google Map API.
The map is not displayed properly unless I refresh the page and I don't understand why.
here is my map.html file:
<div data-role="page" id="map-page">
<div data-role="content" id="canvas-map" style="background-color:red"></div>
<script src="js/map.js"></script>
<script type="text/javascript">
var $canvasMap = $('#canvas-map');
$('#canvas-map').on('pagebeforeshow', initMap());
</script>
</div>
and my map.js file:
function initMap() {
"use strict";
google.maps.visualRefresh = true;
var marker, map,
myLocation = {lat:50, lon:-80},
mapOptions = {
zoom: 5,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon),
mapTypeId: google.maps.MapTypeId.PLAN,
disableDefaultUI: true
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
/** MyPosition **/
marker = new google.maps.Marker({
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
}
If I navigate from another page to the above page, I get the following result:
And then when I refresh, I get the expected result:
It is obviously not a problem with the canvas, since it is displayed (in red). Plus,if I navigate trhough the map, I can see the marker displayed at the right position.
These screenshots were made using Google Chrome, I tried with Firefox and the canvas is here completely red, no map at all.
PS: this is a simple version of my original code, but the behavior is the same.
EDIT:
See Gajotres' answer for details, but basically, within the link to access map.html page, adding target="_blank" solved the issue. Note that target="_self" seems to work as well, strange since it is supposed to be the default value. Details on target here.
There's a trick how google maps v3 framework can be easily implemented with jQuery Mobile.
Lets talk about the problems here. your content div has a height and width problem, mainly because only time page dimensions can be calculated correctly is during the pageshow event. But even then content div will not cover full page.
Your problem can be solved with a little bit of CSS :
#content {
padding: 0 !important;
position : absolute !important;
top : 40px !important;
right : 0 !important;
left : 0 !important;
height: 200px !important;
}
Basically you are forcing your content to cover available space.
Working example: http://jsfiddle.net/RFNPt/2/
Final solution :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" class="page">
<div data-role="content" id="index-content">
<div id="menu">
Map
</div>
</div>
</div>
</body>
</html>
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<title>MyTitle</title>
</head>
<body>
<div data-role="page" id="map-page">
<div data-role="content" id="content">
<div id="canvas-map" style="height:100%"/>
</div>
<style>
#content {
padding: 0 !important;
position : absolute !important;
top : 0 !important;
right : 0 !important;
bottom : 40px !important;
left : 0 !important;
}
</style>
<script type="text/javascript">
$(document).on('pageshow', '#map-page', function(e, data) {
var marker, map,
myLocation = {
lat: 50,
lon: -80
},
mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.PLAN,
center: new google.maps.LatLng(myLocation.lat, myLocation.lon)
};
$('#canvas-map').css("height", "200px").css("padding", "0px");
map = new google.maps.Map(document.getElementById('canvas-map'), mapOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(myLocation.lat, myLocation.lon),
});
});
</script>
</div>
</body>
</html>
If you take a look at this ARTICLE you will find much more information regarding this topic plus examples.
Try to add following code...
$('#canvas-map').on('pageshow', function(){
google.maps.event.trigger(canvas-map, "resize");
});
this will fire resize event and reload the map on your page.
Just for completeness: The action of drawing the map should be performed after the page loads, that is when the page has actual values for width and height and you can initialize it as follows:
var map; //declared as global so you can access the map object and add markers dynamically
$("#canvas-map").on( "pageshow", function() {
var mapProp = {
center:new google.maps.LatLng(53.6721226, -10.547924),
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
});
No refresh needed

Categories