Javascript framework not working properly same code as jsfiddle? - javascript

<html>
<head>
<meta charset="UTF-8">
<title>Simple globe with iTowns</title>
<style>
html { height: 100%; }
body { margin: 0; overflow: hidden; height: 100%; }
#viewerDiv { margin: auto; height: 100%; width: 100%; padding: 0; }
canvas { display: block }
</style>
</head>
<body>
<div id="viewerDiv"></div>
<script src="https://cdn.jsdelivr.net/npm/itowns#2.32.0/dist/itowns.js </script>
<script type="text/javascript">
var viewerDiv = document.getElementById('viewerDiv');
var placement = {
coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
range: 25000000
};
var view = new itowns.GlobeView(viewerDiv, placement);
var orthoSource = new itowns.WMTSSource({
url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts',
crs: "EPSG:3857",
name: 'ORTHOIMAGERY.ORTHOPHOTOS',
tileMatrixSet: 'PM',
format: 'image/jpeg',
})
var orthoLayer = new itowns.ColorLayer('Ortho', {
source: orthoSource,
});
view.addLayer(orthoLayer);
var elevationSource = new itowns.WMTSSource({
url: 'https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts',
crs: 'EPSG:4326',
name: 'ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3',
tileMatrixSet: 'WGS84G',
format: 'image/x-bil;bits=32',
zoom: {min: 3, max: 10},
});
var elevationLayer = new itowns.ElevationLayer('MNT_WORLD', {
source: elevationSource,
});
view.addLayer(elevationLayer);
</script>
</body>
</html>
I am using a framework called iTowns and I have copied the code exactly from a jsfiddle they provided as an example. The jsfiddle loads Earth fine but my code does not properly load the land layer and instead I get a blue sphere. I get this error in the console,
"Failed to load resource: the server responded with a status of 403 (Forbidden)"
I am running the website on a live local server. What am I missing here?
http://jsfiddle.net/q70umk6r/

Hard to tell if your resources are available, but given that you're getting a 403, I'm guessing not.
you could try using cdn package instead though
<script src="https://cdn.jsdelivr.net/npm/itowns#2.32.0/dist/itowns.js"></script>

just because "https://wxs.ign.fr/3ht7xcw6f7nciopo16etuqp2/geoportail/wmts" server dont allow GET request that its request headers' Referer not "localhost:xx/xxx" or other Registered urls;

Related

JS doesn't write info in txt

I'm new in js. So I installed node.js.
What I have: I have html file which opens a map in the browser. When user right click it should create txt file and write 'Learning how to write in a file' in it, but it doesn't.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_fc81479c2a8c4f18ad55baf3c9ba4285 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
</head>
<body>
<div class="folium-map" id="map_fc81479c2a8c4f18ad55baf3c9ba4285" ></div>
</body>
<script>
var map_fc81479c2a8c4f18ad55baf3c9ba4285 = L.map(
"map_fc81479c2a8c4f18ad55baf3c9ba4285",
{
center: [55.02111, 73.40751],
crs: L.CRS.EPSG3857,
zoom: 13,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_216c8662dc00405dba72c81174fd5845 = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_fc81479c2a8c4f18ad55baf3c9ba4285);
var lat, lng;
map_fc81479c2a8c4f18ad55baf3c9ba4285.addEventListener('mousemove', function(ev) {
lat = ev.latlng.lat;
lng = ev.latlng.lng;
});
document.getElementById("map_fc81479c2a8c4f18ad55baf3c9ba4285").addEventListener("contextmenu", function (event) {
// Prevent the browser's context menu from appearing
event.preventDefault();
alert(lat + ' - ' + lng);
return false; // To disable default popup.
});
// Trying to save to text file
// !!!
// !!!
// !!!
// does not work :
const fs = require('fs')
let data = "Learning how to write in a file."
fs.writeFile('Output.txt', data, (err) => {
if (err) throw err;
})
</script>
and if I open console in the browser it shows me:
85 raw : const fs = require('fs')
But if I run code which should create a file in a separate js file - it creates good.
What should I do for it to create file when user right click on a map?
Edit 1:
Added script and still does not work
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js">
</script>
JavaScript is a browser based language for web. You cannot do anything outside the browser environment. Browsers don't give acess to the file system and other modules.
This is the issue that Node js solved. If you want to acess file system using javascript, I'll suggest to create an express web app using Node as backend allowing you to write into files and much more.
Feel free to Google Node and Express you'll get many examples online.
Hope this helps...

Javascript variable to Python

I'm working locally using Django, and I created a template of a map using Leaflet. After doing some research I find that you can let the user click on the map to create a Marker and then pressing a button (export) to download the geoJSON of every figure or marker the user created.
What I want to do is not to download the geoJSON but to store it on a Database (it could be locally). Im not proficient at JavaScript so I'm really really stuck.
This is the map code
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script>
L_NO_TOUCH = false;
L_DISABLE_3D = false;
</script>
<script src="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
<style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
<style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
#map_a3375e0d166f4ec89fd79df498d1f8b8 {
position: relative;
width: 100.0%;
height: 100.0%;
left: 0.0%;
top: 0.0%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
<style>
#export {
position: absolute;
top: 5px;
right: 10px;
z-index: 999;
background: white;
color: black;
padding: 6px;
border-radius: 4px;
font-family: 'Helvetica Neue';
cursor: pointer;
font-size: 12px;
text-decoration: none;
top: 90px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
</head>
<body>
<div class="folium-map" id="map_a3375e0d166f4ec89fd79df498d1f8b8" ></div>
<a href='#' id='export'>Continue</a>
</body>
<script>
var map_a3375e0d166f4ec89fd79df498d1f8b8 = L.map(
"map_a3375e0d166f4ec89fd79df498d1f8b8",
{
center: [46.8527, -121.7649],
crs: L.CRS.EPSG3857,
zoom: 13,
zoomControl: true,
preferCanvas: false,
}
);
var tile_layer_0cce79173c4743718c558aeea7872020 = L.tileLayer(
"https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg",
{"attribution": "Map tiles by \u003ca href=\"http://stamen.com\"\u003eStamen Design\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by/3.0\"\u003eCC BY 3.0\u003c/a\u003e. Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://creativecommons.org/licenses/by-sa/3.0\"\u003eCC BY SA\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
).addTo(map_a3375e0d166f4ec89fd79df498d1f8b8);
var options = {
position: "topleft",
draw: {"polyline": {"allowIntersection": false}},
edit: {"poly": {"allowIntersection": false}},
}
// FeatureGroup is to store editable layers.
var drawnItems = new L.featureGroup().addTo(
map_a3375e0d166f4ec89fd79df498d1f8b8
);
options.edit.featureGroup = drawnItems;
var draw_control_ca0cd7071ba049ccb3dafbbf098f2b38 = new L.Control.Draw(
options
).addTo( map_a3375e0d166f4ec89fd79df498d1f8b8 );
map_a3375e0d166f4ec89fd79df498d1f8b8.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer,
type = e.layerType;
var coords = JSON.stringify(layer.toGeoJSON());
layer.on('click', function() {
alert(coords);
console.log(coords);
});
drawnItems.addLayer(layer);
});
map_a3375e0d166f4ec89fd79df498d1f8b8.on('draw:created', function(e) {
drawnItems.addLayer(e.layer);
});
document.getElementById('export').onclick = function(e) {
var data = drawnItems.toGeoJSON();
var convertedData = 'text/json;charset=utf-8,'
+ encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute(
'href', 'data:' + convertedData
);
document.getElementById('export').setAttribute(
'download', "my_data.geojson"
);
}
</script>
And I know this is the part I have to change
document.getElementById('export').onclick = function(e) {
var data = drawnItems.toGeoJSON();
var convertedData = 'text/json;charset=utf-8,'
+ encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute(
'href', 'data:' + convertedData
);
document.getElementById('export').setAttribute(
'download', "my_data.geojson"
);
}
Could anyone give me some direction/tutorial of how to acchieve what I want?
I would highly recommend the fetch API. It's as close to a simple web request as you can get!
Your code might look like this:
// async function here allows you to use "await" keyword.
document.getElementById('export').onclick = async function(e) {
var data = drawnItems.toGeoJSON();
// make the request:
var rsp = await fetch("path/to/server/upload/url", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
});
console.log("server responded with: ", await rsp.json());
}
EDIT:
The answer to your question HIGHLY depends on which database technology you are using. Some database servers host an HTTP API that allows you to fetch directly to them, such as CouchDB, but this is exceedingly uncommon, even when using Couch (for security reasons, JavaScript in your browser has VERY limited IO options).
Here's the (by far) most common way to approach this problem:
send geoJSON from browser to server (code example above)
server saves JSON to database
You have stated you are using Django. That's the server tech in #2.
On the server, the path you will take is:
create a Django Route at the URL endpoint where you put your path/to/server/upload/url
In the route's python function, you will save the data to the database connected to Django.
In Django, database interactions are typically done via Django's ORM, but you can use any methodology you want at this point.
The code above shows you how to get the geoJSON data from browser JS to your Django server so you can save it to a DB.

Use d3 library to read from json file?

I have two different charts that use the same exact data. One uses json embedded in the html while the other reads a file.
I've been googling to see if I find examples where anychart reads from a json file or a web service. I have found nothing.
Since the 2nd chart reads json data using the d3.json call, I'm thinking that maybe it's possible to use that same function to read the data in the anychart chart.
So I'm including the javascript for both charts.
anychart javascript:
<script type="text/javascript">
anychart.onDocumentReady(function() {
chart = anychart.fromJson(
{chart: {type: "line",
series:[{seriesType: "spline",
data: [{x: "January", value: 10000},{x: "February", value: 12000},{x: "March", value: 18000}]}],
container: "container"}}
).draw();
});
</script>
d3 that reads that from a json file. Maybe I can use this call to populate the report in the previous code?:
d3.json("data.json", function(error, data) {
var nest = d3.nest()
.key(function(d) {
return d.date;
})
.map(data);
rect.filter(function(d) {
return ("$" + d) in nest;
})
.attr("fill", function(d) {
return color(nest[("$" + d)][0].open);
})
});
Any help is appreciated. I just want to know if this is possible.
There are https://api.anychart.com/7.13.1/anychart.data#loadJsonFile and https://api.anychart.com/7.13.1/anychart#fromJsonFile methods, they are a part of data adapter script.
Here are samples:
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// To work with the data adapter you need to reference the data adapter script file from AnyChart CDN
// (https://cdn.anychart.com/js/latest/data-adapter.min.js for latest or https://cdn.anychart.com/js/7.11.1/data-adapter.min.js for the versioned file)
// Load JSON data and create a chart by JSON data.
anychart.data.loadJsonFile("https://cdn.anychart.com/charts-data/data_json.json", function (data) {
chart = anychart.bar(data);
chart.title("Load JSON data and create a chart");
chart.container("container");
chart.draw();
});
});
</script>
</body>
</html>
https://playground.anychart.com/api/7.13.1/modules/anychart.data.loadJsonFile-plain
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// To work with the data adapter you need to reference the data adapter script file from AnyChart CDN
// (https://cdn.anychart.com/js/latest/data-adapter.min.js for latest or https://cdn.anychart.com/js/7.11.1/data-adapter.min.js for the versioned file)
// Create a chart by JSON config.
anychart.fromJsonFile("https://cdn.anychart.com/config-samples/line-chart.json", function (chart) {
chart.title("Create a chart by JSON config");
chart.container("container");
chart.draw();
});
});
</script>
</body>
</html>
https://playground.anychart.com/api/7.13.1/modules/anychart.fromJsonFile-plain

Uncaught TypeError: Cannot read property of undefined - Google Maps Javascript API

I am currently developping a web app using Google Maps Javascript API. Everything worked just fine until a few hours ago, when I got these errors :
`Uncaught TypeError: Cannot read property '15' of undefined`
`Uncaught TypeError: Cannot read property '9' of undefined`
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Application</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script>
</head>
<body>
<h1 align="center">Notre super indicateur</h1>
<div id="map" style="width:1000px; height:800px; margin-left:auto; margin-right:auto;"></div>
</body>
</html>
And here is my script.js file :
function initMap() {
var tab = arrayData;
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 48.856583, lng: 2.337341},
zoom: 12
});
map.data.loadGeoJson('some GeoJSON file');
map.data.setStyle(function(feature) {
var color;
var nb = feature.getProperty("c_qu");
if (tab[nb-1].index < 0.3) {
color = "red";
}
else if (tab[nb-1].index < 0.6) {
color = "orange";
}
else {
color = "green";
}
return /** #type {google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: "grey",
strokeWeight: 2
});
});
}
Note : arrayData is defined in my main.js file
This is really weird : the error is said to be in my script.js file, however when I update it the error stays at the same line. Weirder is the fact that once in 15 or 20 times, it perfectly works (and my code is also on GitHub Pages and it works fine).
Could someone help me with this? Thank you very much !
Tom.

Error trying to edit a script src attribute using jQuery

I'm trying to follow this Google Maps example, but instead of hardcoding my API KEY, I'm trying to fetch it from an API I created.
So, I created this HTML file. The KEY is properly fetched, but when I'm trying to set the script's src attribute on runtime (so I can add my own key to the URI), it's not getting added at all.
This is my HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers example</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
</script>
<script async defer>
$.get( "maps_api_key", function( data ) {
const API_KEY = String(data)
console.log("API_KEY: " + API_KEY)
var uri = "https://maps.googleapis.com/maps/api/js?key=" + API_KEY + "&callback=initMap"
console.log("URI is: " + uri)
$("#maps_fetcher").attr("src", uri)
});
</script>
<script id="maps_fetcher" async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
console.log("Map fetcher")
</script>
</body>
</html>
The line at console.log("Map fetcher") is never being printed either.
For what it's worth, I'm serving the HTML through Node and Express.
Any ideas on what could be happening here?
Thanks in advance

Categories