I've got the following map on my website initialised from js.
How do I disable city names like how other countries are shown?
You can use a custom style as shown in the sample below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script>
var map;
var hiddenCityLabels = {
"version": "1.0",
"elements": {
"point": {
"labelVisible": false,
"visible":false
}
}
};
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
customMapStyle: hiddenCityLabels
});
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;height:600px;"></div>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=<Your Bing Maps Key>'></script>
</body>
</html>
Related
I am trying to display open radioactivity data from the German Agency for Protection of Radiation (https://www.imis.bfs.de/geoportal/).
They have a nice GeoJson API.
I can display the individual markers (points of radioactivity sensors), but cannot display the value feature.properties.value in a popup.
I tried onEachFeature but somehow it did not work. I searched for quite a bit, but could not find a solution
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radioaktivität</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript:
let config = {
minZoom: 2,
maxZoom: 18,
};
const zoom = 7;
const lat = 51.7036;
const lng = 10.2166;
const map = L.map("map", config).setView([lat, lng], zoom);
let url = 'https://www.imis.bfs.de/ogc/opendata/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=opendata:odlinfo_odl_1h_latest&outputFormat=application/json';
const response = fetch(url)
.then(response => response.json())
.then(response => {
L.geoJson(response, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.value);
}
}).addTo(map);
});
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I use leaflet to display my geolocated picture on my website (you can see my test site here: http://test.vincentbourganel.fr/pages/map-osm/)
everthing goes fine exept one thing:
when I browse my website from an ios mobile device (ios 11.3.1), no markers are displayed.
I can't figure where is the matter.
I try to have a reduce test case (only html, outside zenphoto, used for my gallery) with only 2 markers but the issue remains the same.
You can see it here:
http://test.vincentbourganel.fr/test_osm_map.html
can you point me to the right direction to solve this issue?
thanks for your help!!
vincent
edit after comment:
there is the code of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
there is the code of my test case taht you can see here: http://test.vincentbourganel.fr/test_osm_map.html
I am unable to see the 2 markers on my ios mobile device.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
I have followed all the steps that required to initialize firebase and display image from firebase storage in html. However, the image do not display. This is part of my code. I hope the experts here can help me in solving this problem.
This is part of my code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=yes">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="components/loader.css">
<script src="components/loader.js"></script>
<ons-toolbar>
<!-- <div class="center">Page2</div> -->
BACK
</ons-toolbar>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"> </script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBIGAWQPXoU0446Ghupx8wxS9buveKY2jA",
authDomain: "displaysop.firebaseapp.com",
databaseURL: "https://displaysop.firebaseio.com",
projectId: "displaysop",
storageBucket: "displaysop.appspot.com",
messagingSenderId: "82849386400"
};
firebase.initializeApp(config);
var storageRef = firebase.storage.ref('images/PRSB Map.jpg');
storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url){
var test = document.querySelector('images').src;
}).catch(function(error){
});
</script>
<img src="test" height="125" width="125"/>
</body>
</html>
I'm no JavaScript expert, but it looks like you'll need to:
Get the correct DOM object
Set it's src property to the downloaded URL
The code might look something like this:
<script>
...
storageRef.put('images/PRSB Map.jpg').getDownloadURL().then(function(url) {
var test = document.querySelector('#test');
test.src = url;
});
</script>
...
<img id="test" height="125" width="125"/>
Is there a way for codemirror to highlight the code matching a pattern (like if I use the search addon) when the page load? So I could load the page with ?search=my_pattern and pass the pattern to codemirror.
Here's a sample code and a jsfiddle. You can use CTRL+F to use the search addon.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'python',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/ErxMb/
I figured out how to do it using overlay.js by looking at the CodeMirror: Overlay Parser Demo.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/codemirror.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/search.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/searchcursor.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/overlay.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/match-highlighter.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/python.js"></script>
</head>
<style type="text/css">
.cm-highlightSearch {background: yellow;}
</style>
<body>
<textarea id="myTextArea">print "hello world"</textarea>
<script>
var keyword = 'hello';
CodeMirror.defineMode("highlightSearch", function(config, parserConfig) {
var searchOverlay = {
token: function(stream, state) {
if (stream.match(keyword)) {
return "highlightSearch";
}
while (stream.next() != null && !stream.match(keyword, false)) {}
return null;
}
};
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "python"), searchOverlay);
});
var myTextArea = document.getElementById('myTextArea');
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
'mode': 'highlightSearch',
'lineNumbers': true
});
</script>
</body>
</html>
http://jsfiddle.net/HkjY7/