When i try to load markers from my map i get this error message:
{"message":"Markers do not exist"}
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BoxMap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'this_is_my_token';
var map = L.mapbox.map('map')
.setView([40.447, -5.625], 2);
L.mapbox.styleLayer('mapbox://styles/this_is_my_style').addTo(map);
L.mapbox.featureLayer().loadID('this_is_my_map_id').addTo(map);
</script>
</body>
</html>
PS: when i try to put a map_id from the given examples on mapbox website, it works! example: examples.map-h61e8o8e
Thanks
Related
I am trying to use the JS version of mapbox in my web application. BUt when changing the example lat-long to delhi's latlong its showing wrong location.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2ViZXhwZXJ0c3VqZWV0IiwiYSI6ImNqdmh4MXM0dDAwMWs0NXFyNHkxc2o1eGwifQ.jgbBoS14uvv8i_lMrCQF5A';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [28.6466773,76.813073], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
As High Performance Mark mentioned, MapBox uses swapped co-ordinates that means they are not using:
[lat, lng]
they are using
[lng, lat]
Try to change it and then try again.
My web app contains two basemaps to display. I created a leaflet control layer to manage their visibility :
var baseMaps = {
"Bing Satellite": bingLayer,
"OpenCycleMap": tileLayer
};
L.control.layers(baseMaps).addTo(map);
The issue is the icon which should be within the control doesn't show up. When I inspect, the console renders a 404 error : Failed to load resource: the server responded with a status of 404 (Not Found) on layers-2px.png.
I'm using cdn to call leaflet so I have no clue about the issue!!
Here is the rendering in the map :
Your assistance would be appreciated.
I put a working example.
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Control.Layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var gray = L.layerGroup();
// more than one service can be grouped together and passed to the control together
L.esri.basemapLayer("DarkGray").addTo(gray);
L.esri.basemapLayer("GrayLabels").addTo(gray);
var states = L.esri.featureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
style: function (feature) {
return {color: '#bada55', weight: 2 };
}
});
var map = L.map('map', {
center: [39, -97.5],
zoom: 4,
layers: [gray, states]
});
var baseLayers = {
"Grayscale": gray,
"Streetmap": L.esri.basemapLayer("Streets")
};
var overlays = {
"U.S. States": states
};
// http://leafletjs.com/reference-1.0.3.html#control-layers
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
You can modify the background-image property of the following css selectors by setting your custom image:
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle {
background-image: url('http://ovrdc.github.io/parcel-viewer/assets/images/layers-bl.png');
background-size: 80%;
margin-top: 0px;
width: 36px;
height: 36px;
}
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Control.Layers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.3/dist/esri-leaflet.js"
integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
.leaflet-control-layers-toggle, .leaflet-touch .leaflet-control-layers-toggle {
background-image: url('http://ovrdc.github.io/parcel-viewer/assets/images/layers-bl.png');
background-size: 80%;
margin-top: 0px;
width: 36px;
height: 36px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var gray = L.layerGroup();
// more than one service can be grouped together and passed to the control together
L.esri.basemapLayer("DarkGray").addTo(gray);
L.esri.basemapLayer("GrayLabels").addTo(gray);
var states = L.esri.featureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
style: function (feature) {
return {color: '#bada55', weight: 2 };
}
});
var map = L.map('map', {
center: [39, -97.5],
zoom: 4,
layers: [gray, states]
});
var baseLayers = {
"Grayscale": gray,
"Streetmap": L.esri.basemapLayer("Streets")
};
var overlays = {
"U.S. States": states
};
// http://leafletjs.com/reference-1.0.3.html#control-layers
L.control.layers(baseLayers, overlays).addTo(map);
</script>
</body>
</html>
I have a jsfiddle here - http://jsfiddle.net/eYV4n/
Really simple navigation and a hidden div block beneath it.
When you click the second link in the nav the div block slides down with slideToggle.
When the div block slides down I would like the button clicked to be selected.
I can do this when it's clicked by changing the background color.
Is it possible to deselect the link (change it's color back) when the div block slides again.
jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>One</li>
<li>Two ↓</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>
A better solution is to toggle a class that in turn changes the background. You should make it a best practice to never style elements with Javascript, you should use CSS for that. Adding/removing classes is fine though. This will make the code much easier to maintain in the long run, and it's also more semantic since you're using classes and not inline styling.
Try this:
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})
Then in your CSS.
.active { background: red; }
Edit: Jsfiddle here.
I am trying to implement a simple page with bunch of text fields and using iscroll to scroll.
The issue is when I click on the textfield, the key pad appears but I can't scroll either to the bottom of the screen or to top of the screen.
Here is the code. Any help regarding this is much appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>sample</title>
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If you application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// If you want to prevent dragging, uncomment this section
/* function preventBehavior(e)
{
e.preventDefault();
}
document.addEventListener("touchmove", preventBehavior, false);*/
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
function onDeviceReady()
{
// do your thing!
}
</script>
<link rel="stylesheet" type="text/css" href="scrollbar.css">
<script type="application/javascript" src="src/iscroll.js?v4"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute;
top:0;
left:0;
width:100%;
height:45px;
line-height:45px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
bottom:48px;
left:0;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:relative;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
float:left;
width:100%;
padding:0;
}
#scroller ul {
position:relative;
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#scroller li > a {
display:block;
}
</style>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
<li><input></li>
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
check out this
iScroll 4 not working with form <select> element iPhone Safari and Android browser
i was facing the same issue. worked for me. just a small change. instead of doing for select tag, do for all the tags for which u face the issue.
try to remove -webkit-user-select:none;
And set the 'height' 1/2 of full screen.
This is my code:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" manifest="/m?manifest=1">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no, width=device-width">
</head>
<body >
<div></div>
<style type="text/css">
div{
background:red;
}
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</body>
</html>
I would do it with a combination of css and javascript (using jquery).
for the javascript
updateOrientation : function() {
var orientation = window.orientation;
switch (orientation) {
// If we're horizontal
case 90:
case -90:
// Set orient to landscape
$(body).addClass("landscape");
break;
// If we're vertical
default:
// Set orient to portrait
$(body).addClass("portrait");
break;
}
}
for the css:
body{
height: 240px;
}
/* Reposition on orientation change */
body.landscape{
height: 160px;
}
This is just a basic outline, adjust it as you see fit