I am able to display the map tiles using the code below, but cannot seem to find a way to get this geoJSON data to display using the Marker Cluster library for Leaflet. I was able to display the GeoJSON data without Marker Cluster no problem. I must be missing something obvious. Any assistance would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Leaflet GeoJSON Test</title>
<meta charset="utf-8" />
<!--Leaflet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<!--Leaflet-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<!--Marker Cluster-->
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
<!--Marker Cluster-->
<script src="..\geoJSON\ga_brewery_master_list.geojson" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([33.76088, -84.38599], 5);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'examples.map-i875mjb7'
}).addTo(map);
var geojsonMarkerOptions = {
radius: 4,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var markers = L.markerClusterGroup();
var geoJsonLayer = L.geoJson(brew, {
onEachFeature: function popupContent(feature, layer) {
layer.bindPopup("<b>Name:</b>" + " " + feature.properties.Name + '<br />'
+ "<b>Type:</b>" + " " + feature.properties.Type
+ '<br />'
+ "<b>Barrels Produced/yr:</b>" + " " + feature.properties.Barrels_Ye
+ '<br />'
+ "<b>Address:</b>" + " " + feature.properties.Address
+ '<br />'
+ "<b>Zip Code:</b>" + " " + feature.properties.Zip_Code
+ '<br />'
+ "<b>City:</b>" + " " + feature.properties.City
+ '<br />'
+ "<b>State:</b>" + " " + feature.properties.State
+ '<br />'
)
;
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
</script>
This is very embarrassing, but I found the problem. I had backslashes rather than forward slashes in the relative paths to the Marker Cluster plugin.
I simply changed this...
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
To this...
<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>
That fixed the problem. Here is the live map just for good measure.
http://sportruminations.com/Leaflet/HTML/test.html
Related
i have js code like this
var data = {
"items": [
{
"src": "xxx",
"url": "xxx",
"ttl": "xxx%"
},
]};
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
its work perfectly but i want replace var data ={xxx} with import url from github
i have try this code but not work :)
$.getJSON('https://raw.githubusercontent.com/user/lokal.json', data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
and this is my json
var data = {
"items": [
{
"src": "https://xxx",
"url": "https://xxx",
"ttl": "METRO TV"
}
]};
plzz help me
You are using .getJSON incorrectly.
.getJSON will return data and you need to use that data to loop over and process.
Check this out: .getJSON
Following code should work for you:
$.getJSON('https://raw.githubusercontent.com/firzi15/stb21/main/lokal.json', function (data) {
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
this is for you reference. you need to loop through items from your json data.
Demo https://jsbin.com/nicacux/edit?html,js,console,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul></ul>
</body>
</html>
JS
$(document).ready(function() {
$.getJSON('https://jsonblob.com/api/1049293810068373504', data.items, function(i, f) {
$.each(i.items, function(j, v) {
console.log(v, f);
$('ul').append('<li class="scroll-nav">' + v.ttl + '<img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
});
How do I extract the odds value from this
JSON File and append it to a html-document?
[{"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47","
oddsx":"4.39",
"odds2":"8.40"}]
HTML:
<html>
<head>
/*script src*/
</head>
<body>
<span id="odds"></span> /*output value from json odds */
</body>
</html>
I've tried something like this:
<script type="text/javascript">
$(function() {
$.getJSON( "http://myJson.json", function( data ) {
var items = [];
items.push( "<span>"+ data.odds1 + data.odds2 + "</span><br />" );
});
});
</script>
I want to extract odds1 oddsx odds2 and put those values into a HTML file.
Any help would be much appreciated!
This should work, if you are willing to use something like jQuery.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON TEST</title>
<meta name="generator" content="BBEdit 11.5" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.getJSON( "http://pathto/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<span id='" + key + "'>" + key + ": " + val + "</span><br />" );
});
$( "<div/>", {
"class": "my-new-list",
html: "<p>Summary of JSON data:</p>" + items.join( "" )
}).appendTo( "body" );
$("#odds").html("odds1: " + data.odds1 + ", oddsx: " + data.oddsx + ", odds2: " + data.odds2);
});
});
</script>
</head>
<body>
<span id="odds"></span>
</body>
</html>
JSON file
{"id":"128995","home":"RB Leipzig","away":"FC Heidenheim","homeLogo":"36360.png","awayLogo":"5885.png","url":"","odds1":"1.47","oddsx":"4.39","odds2":"8.40"}
try this
<script id="myJson" type="application/json">
{
"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47",
"oddsx":"4.39",
"odds2":"8.40"
}
</script>
<script type="text/javascript">
$(function() {
var x = JSON.parse($('#myJson').html());
console.log(x.odds1);
console.log(x.odds2);
console.log(x.oddsx);
});
</script>
I am using HTML to display my PHP JSON Encoded information but I would like to know how do I display the information in a table? I have already created the PHP which is just a simple array which shows a person's first name, surname and email.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<title></title>
</head>
<body>
<!-- this UL will be populated with the data from the php array -->
<ul></ul>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
console.log(data);
$.each(data, function(key, val) {
$('ul').append('<li id="' + key + '">' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</li>');
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<title></title>
</head>
<body>
<!-- JSON goes to <tbody> -->
<table>
<thead>
<tr><th>Key</th><th>Name and Email</th></tr>
</thead>
<tbody>
</tbody>
</table>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
$.each(data, function(key, val) {
$('tbody').append('<tr><td>' + key + '</td><td>' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</td></tr>');
});
});
});
</script>
You can append the JSON like this.
I want to show mouse coordinates in a page and when I don't declare DOCTYPE it works but when I declare DOCTYPE it doesn't! Could you please help me with that? here is my code:
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
In the code above I can get y coordinates with no problem but when I add a doctype it doesn't show y coordinates correctly:
<DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.body.onmousemove = function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
}
</script>
</body>
</html>
EDIT
here is my code and it works perfectly now. Thank you all:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
if (document.addEventListener) {
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
} else {
document.attachEvent("onmousemove", function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
}
</script>
</body>
</html>
Try do listen mouse event with event Listener, like this:
<!DOCTYPE html>
<html>
<head>
<title>problem</title>
</head>
<body>
text...
<div id="show"></div>
<script>
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + window.event.clientX + "<br />" + "Y: " + window.event.clientY;
});
</script>
</body>
</html>
Firstly the correct the declaration of DOCTYPE by writing <!DOCTYPE html> instead of <DOCTYPE html>.
Secondly, change your script to:
document.addEventListener('mousemove', function(event) {
document.body.innerHTML = "X: " + event.clientX + "<br />" + "Y: " + event.clientY;
});
For the parameters passed in a function can be referred directly, writing window.event would be when event would be a child of window object, in other words a global object.
When i use ons.navigator.pushPage and navigate to searchNearby html page it should show me current geolocation coordinates. However it doesnt do that. when i load the searchNearby page directly it shows coordinates that perfectly. Any idea about it
index.html
<body ng-controller="courseController">
<ons-navigator title="Class Finder">
<ons-page>
<ons-row>
<ons-col size="80" style="padding: 8px">
<ons-search-input ng-model="searchText" placeholder="Search..." >
</ons-search-input>
</ons-col>
<ons-col size="20" >
<ons-button type="large--quiet" ng-click="ons.navigator.pushPage('searchNearby/index.html',{title:'Search Nearby'})">Search nearby
</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-navigator>
</body>
searchNearby/index.html
<body>
<p id="geolocation">Finding geolocation...</p>
<div id="t01"> </div>
<script type="text/javascript" charset="utf-8">
var lat,lon;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}
function onSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
function onError(error){
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</body>
Your JS is not getting fired on searchNearby/index.html because you page is being loaded asynchronously.
I would suggest setting up some kind of callback for when then page has fully loaded, so you can execute your getCurrentPosition method.
Alternatively, you could get the position beforehand and then pass the success object over to the searchNearby page.