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.
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
Leaflet is open source and free. However the examples on leaflet site use Mapbox to render map. Mapbox is more expensive than Google map (Mapbox pricing).
The question is: can anyone use Leaflet really free?
You can use the Leaflet library for free, only the tileprovider used in the examples, Mapbox, asks money for serving tiles. You just need a free tileprovider like OpenStreetMap for instance:
var map = new L.Map('leaflet', {
center: [0, 0],
zoom: 0,
layers: [
new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 1.0.3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
</body>
</html>
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(
I'm using Google Maps API v3, and the map language is set according to user's browser locale.
Is there a way to change this setting and force map to load in US English?
There is this, but it changes the region language, i.e. street names etc., I also want to control the map buttons and the interface language.
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
And you can load map in any specific language by passing the value of language code parameter with in this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
Some example language codes are given here:
pass en for load map into english similarly ja for Japanese and
fr for French
I hope this is what you are asking for.
for more info click here
Happy coding!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&language=sa"></script>
i am using languague of saudi arabia
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...