In reference to this example for mapbox-gl-js...
https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
When I run this example code with my api key, I only get the map centered on the "Field Museum of Natural History" without any walls extruded. What am I missing here? The other examples seem to work straight out of copy paste.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></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.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/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.eyJ1IjoiYWtpbmh3YW4iLCJhIjoiY2lwNGYxNDhlMDAwcnZsbTVnY3R0eXo3ZSJ9.XED4AbQBkX8E9qqnwplnWw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-87.61694, 41.86625],
zoom: 15.99,
pitch: 40,
bearing: 20
});
map.on('load', function() {
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': {
// Geojson Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://www.mapbox.com/mapbox-gl-js/assets/data/indoor-3d-map.geojson'
},
'paint': {
// See the Mapbox Style Spec for details on property functions
// https://www.mapbox.com/mapbox-gl-style-spec/#types-function
'fill-extrusion-color': {
// Get the fill-extrusion-color from the source 'color' property.
'property': 'color',
'type': 'identity'
},
'fill-extrusion-height': {
// Get fill-extrusion-height from the source 'height' property.
'property': 'height',
'type': 'identity'
},
'fill-extrusion-base': {
// Get fill-extrusion-base from the source 'base_height' property.
'property': 'base_height',
'type': 'identity'
},
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
</html>
Thanks Everyone for your help
This example has a CORS issue
Failed to load file:///mapbox-gl-js/assets/indoor-3d-map.geojson: Cross origin requests are only supported for protocol schemes:
A simple workaround is to download the geojson from the github gist and save it locally in the same directory as your .html file. Then you can add it as a mapbox layer source, e.g:
'data': 'indoor_3D_map_example.geojson'
Because your data and code aren't in the same domain name. You can build a sever, then publish the data and code. You can make it.
Related
I'm new to creating maps with map layers and tiles, so please bear with me.
So I'm working on a map to display points, and I've read that OpenStreetMap is free, and mapbox isn't. For this reason we only want to use OpenStreetMap.
This HTML example draws a map and plots points, but the code says it uses both technologies. Here's the code.
Two questions:
Is it correct to say that both mapbox and OpenStreetMap are essentially the same thing as they both offer tiles used to draw maps?
I would like to remove mapbox and only use OpenStreetMap in this example. Is this possible?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - Points</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-dsdfsdjflsdfjsljfsdl+asfsfsflskjfsld==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/wrwrwerwer+wwerwrwerwer+dasdasdas==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="points.js" type="text/javascript"></script>
<script>
var map = L.map('map').setView([18.4148, -66.1241], 11);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.qweqeqweqweqwe.qeqqqwe', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(map);
L.geoJSON([bicycleRental], {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 7,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
To use OpenStreetMap tiles you have to set this:
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo(map);
Instead of mapbox servers. Check the example on the Leaflet's home https://leafletjs.com/index.html
This is a great resource for finding basemaps. When you select one, you can simply copy the JavaScript provided. Most are free to use with attribution.
i have published suitability map on arc server. but my map does not display, i have followed arcgis java script api example. i want to display suitability map of the desired area. when user click on the map pop window display the analysis result here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Create web map from id</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
//if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
arcgisUtils.createMap("map").then(
function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
<div id="legend"></div>
</div>
</div>
</body>
</html>
well, as i can see the question and code you added above below are this things you want to achieve (correct me if i am wrong)-
create a map
add a published layer(arcgis layer url) on the map
show popup on the click of published gis layer.
As your example says you don't have a webmap id so you not need to worry about that.
Below is the working example for that-
require([
"dojo/dom",
"dojo/dom-construct",
"esri/map",
"esri/dijit/InfoWindow",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dojo/string",
"dojo/domReady!"
], function(
dom,
domConstruct,
Map,
InfoWindow,
FeatureLayer,
InfoTemplate,
string
) {
var infoWindow = new InfoWindow({}, domConstruct.create("div"));
infoWindow.startup();
// **** update center according to your feature layer url
var map = new Map("mapDiv", {
center: [-122.41, 37.78],
zoom: 17,
basemap: "topo",
infoWindow: infoWindow
});
var template = new InfoTemplate();
//*** update the title field name according to your feature layer url
template.setTitle("<b>${qAddress}</b>");
template.setContent("${*}");
// ****** replace with your Feature layer url "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0"
var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{
infoTemplate: template,
outFields: ["*"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(180, 175);
});
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color:#fff;
overflow:hidden;
}
#header{
border:solid 2px #AAc4c4;
background:#fff;
color:#749749;
border-radius: 4px;
font-size:14px;
padding-left:20px;
font-weight:700;
}
#map{
padding:1px;
border:solid 2px #AAc4c4;
border-radius: 4px;
}
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<script>var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="https://js.arcgis.com/3.20/"></script>
<body>
<div id="mapDiv"></div>
</body>
Note- Update the sample code as per comments in it.
If you want more info let me know i will update the answer accordingly.
Hoping this will help you :)
Well, you apparently adapted this sample:
https://developers.arcgis.com/javascript/3/jssamples/ags_createwebmapid.html
I am not sure if this is what you want, as using webmaps needs some licensing, I guess. In any case, you need to change few lines in your example. Instead of
<link rel="stylesheet" href="css/layout.css">
you should have
<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/ags_createwebmapid/css/layout.css">
to load the original CSS file. You should make your own copy and load it from your server.
More important is to change this line:
arcgisUtils.arcgisUrl = "http://localhost:6080/arcgis/rest/services/Soil_Maps/changa_manga_soil_map/MapServer/0";
which should be:
arcgisUtils.arcgisUrl = "https://www.arcgis.com/sharing/rest/content/items/";
or, as the sample suggests, path with YOUR portal URL.
And, last but not least, the next line must be something like:
arcgisUtils.createMap("ef9c7fbda731474d98647bebb4b33c20","map").then(
First of all I would like to say that, I am beginner level in terms of any web programming languages. I am trying to build a very basic map with some gis based vector layers overlaid on top of it. I created a point layer on Geoserver with FarmerMarkets name in Mapabase workspave. However I cannot transfer these points on top of map by using HTML. I provided the code below. If you guys can help me I would be grateful.
Cheers
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Eko eko ses</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/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 = <my token>;
var map = L.mapbox.map('map', <>)
.setView([40, -75], 11);
// Add the WMS
var layer = new OpenLayers.Layer.WMS(
"WMS", "http://localhost:8080/geoserver/Mapabase/wms",
{
LAYERS: 'Mapabase:FarmersMarkets',transparent: true
},
{
singleTile:true,
isBaseLayer: false,
}
);
map.addLayer(layer);
</script>
</body>
</html>
I noticed that the problem was basically disparity between the reference systems of map and WMS. So it is solved.
I built this bit of code from a pretty long search on the web full of failures trying with various players to play this,
http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8
m3u8 stream. I will put up my compact(paste it into an html file) code in here in hopes someone can point me in the right direction. Thank you for reading.
<html>
<head>
<title>test page</title>
</head>
<body>
<script type='text/javascript' src='http://dev.landgraaf.net/jwplayer.js'></script>
<div id='livefeed'></div>
<script type="text/javascript">
jwplayer('livefeed').setup({
'id': 'playerID',
'width': '480',
'height': '300',
'provider': 'video',
'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8',
'image': 'http://dev.landgraaf.net/webcam.jpg',
'bufferlength':5,
'modes': [
{type: 'flash', src: 'http://dev.landgraaf.net/player.swf'},
{
type: 'html5',
config: {
levels: [ {'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8'} ],
'provider': 'video',
'x-webkit-airplay': 'allow'
}
}
]
});
</script>
</body>
</html>
M3U8 does not run in Flash mode in JW5. You would need JW6 for this. Here is some more information - http://www.longtailvideo.com/support/jw-player/28856/using-apple-hls-streaming, if you would like a trial of us, please contact us - http://www.jwplayer.com/contact-us/
I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512¢er=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...