How to add layers to arcgis map by react-arcgis npm? - javascript

I am trying to add a layer to arcgis with react-arcgis npm,
esriPromise(["esri/layers/TileLayer"]).then(([ TileLayer ]) => {
var initLayer = new TileLayer({
url: "http://......."
});
console.log(initLayer);
this.setState({ layer: initLayer });
});
But I get null outputs to most of the properties.
Plus when I'm trying to add the layers properties to the map, I get following errors,
[esri.core.Accessor] Accessor#set Assigning an instance of
'esri.layers.TileLayer' which is not a subclass of
'esri.core.Collection'
<div id = 'main-content'>
<Map
class="full-screen-map"
mapProperties={{
basemap: 'topo',
showLabels : true,
logo: false,
sliderPosition: 'bottom-left',
layers: this.state.layer,
}}
viewProperties={{
layers: this.state.layer,
zoom: 12,
extent: this.state.extent,
minZoom: minZoom,
maxZoom: maxZoom,
}}
onFail={this.handleFail}
onLoad={this.handleMapLoad}
/>
</div>
Any help would be much appreciated...

Layers is a collection. I was passing a single layer it self all this time.
All I had to do is make an array of 'layer' state and pass the layer to the array

Related

I can't show a multipolygon on a map in OpenLayers

I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.

Adding Marker to Google Maps in google-map-react with functional components

I am using the google-map-react NPM package to create a Google Map and several markers.
The information for the coordinates, infowindow, icon, etc. will come from a JSON file.
I have added onGoogleApiLoaded and yesIWantToUseGoogleMapApiInternals.
This is what my code currently looks like, with the markers being inside this file for the time being
import React, { useEffect } from 'react'
import GoogleMapReact from 'google-map-react'
let mapOptions = {
center: { lat: 39.56939, lng: -40.0000 },
zoom: 3.5,
disableDefaultUI: true,
gestureHandling: 'none',
zoomControl: false,
scaleControl: false,
zoomControlOptions: false,
scrollwheel: false,
panControl: false,
};
function ModelsMap({ data, state }) {
console.log(data.models)
function initMap() {
let markers = [
/.../
];
function Marker(props) {
let marker = new google.maps.marker({
position: props.coords,
content: props.content,
icon: props.icon,
map: map
});
let infoWindow = new google.maps.InfoWindow({
content: props.content
});
Marker.addListener('click', function () {
infoWindow.open(map, marker);
})
}
}
// useEffect(initMap, []); it will only render once
return (
<div style={{height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "YOUR_API_KEY" }}
defaultCenter={{lat: 39.56939, lng: -40.0000 }}
defaultZoom={3.5}
options={mapOptions}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
>
</GoogleMapReact>
</div>
);
}
export default ModelsMap;
I have followed the solution listed on This other stack overflow post, but that didn't work either.
Base on the answers on the StackOverflow you provided they uses new maps.Marker() to create a new Google Maps marker. If you want to get the value of your coordinates,icons and different properties of marker from a json data, you need to put this new maps.Marker() to loop through each json data. Below should be the value of your ModelsMap. Don't for get to import your json file.
const ModelsMap = (map, maps) => {
//instantiate array that will hold your Json Data
let dataArray = [];
//push your Json Data in the array
{
data.map((markerJson) => dataArray.push(markerJson));
}
//Loop through the dataArray to create a marker per data using the coordinates in the json
for (let i = 0; i < dataArray.length; i++) {
let marker = new maps.Marker({
position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
map,
label: dataArray[i].id,
});
}
};
Here is a sample code that shows this. Please use your own API key for this to work.
Side Note: I removed the API Key in your question. Please don't share your API keys in public sites in the future.
enable javascript map api from your google cloud console

Hide full screen control of google map charts

Hello I am using google map charts available in google visualization chartsGoogle Map Chart. But there is no way we can hide the full screen control symbol appears in top-right position. Available options can be seen here. I have also tried to use fullscreenControl: false option given on official google map api documentation fullscreenControl but that did not work for me. Please suggest how to disable this options on mobile/ionic apps.
this.element = this.el.nativeElement;
let mapOptions = {
showTooltip: true,
tooltip: { isHtml: true },
mapType: 'satellite',
useMapTypeControl: true,
fullscreenControl: false
};
let data = [
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
];
dataTable = google.visualization.arrayToDataTable( data );
this.map = new google.visualization.Map(this.element);
this.map.draw( dataTable, mapOptions );
Thanks in advance
Below code working for me in Ionic app, You can try this:
declare var google; // declare this var above #Component({}) with your other imports
directionsDisplay = new google.maps.DirectionsRenderer;
#ViewChild('map') mapElement: ElementRef;
map: any;
this.map = new google.maps.Map(this.mapElement.nativeElement, {
zoom: 15,
center: this.maplocation, // this.maplocation={lat:'',long:''} is my Lat,Long values
fullscreenControl: false
});
this.directionsDisplay.setMap(this.map);
new google.maps.Marker({
position: this.maplocation,
map: this.map
});
In HTML :
<ion-content>
<div #map id="map"></div>
</ion-content>

How to display a heatmap using dburles:google-maps Meteor package?

UPDATE: Code below is fixed as per accepted answer and is confirmed to be working.
I'm a bit stuck with Meteor, please help me out.
I've installed the dburles:google-maps package and got the map to show markers just fine.
Then I tried to display a heatmap and it's causing an error, I can't resolve - "Uncaught InvalidValueError: setMap: not an instance of Map(anonymous function)"
Console output can be seen here - http://improveit.meteor.com/map
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>
Change this line:
heatMapLayer.setMap(issueMap);
to
heatMapLayer.setMap(issueMap.instance);
The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience.
I confirmed it works on your site:
Template.map.helpers({
issueMapOptions: function() {
// Make sure the maps API has loaded
if (GoogleMaps.loaded()) {
// Map initialization options
return {
zoom: 13,
center: new google.maps.LatLng(37.774546, -122.433523),
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: false,
panControl: false,
streetViewControl: false
};
}
}
});
Template.map.onCreated(function() {
// We can use the `ready` callback to interact with the map API once the map is ready.
GoogleMaps.ready('issueMap', function(issueMap) {
var issueData = [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.757676, -122.405118),
new google.maps.LatLng(37.757039, -122.404346),
new google.maps.LatLng(37.756335, -122.403719),
new google.maps.LatLng(37.755503, -122.403406),
new google.maps.LatLng(37.754665, -122.403242),
new google.maps.LatLng(37.753837, -122.403172),
new google.maps.LatLng(37.752986, -122.403112),
new google.maps.LatLng(37.751266, -122.403355)
];
var issueArray = new google.maps.MVCArray(issueData);
var heatMapLayer = new google.maps.visualization.HeatmapLayer({
data: issueArray,
radius: 20
});
heatMapLayer.setMap(issueMap.instance);
});
});
<template name="map">
<h1>Issue heat map</h1>
<p>This map will display issues and their severity</p>
<div class="map-container">
{{> googleMap name="issueMap" options=issueMapOptions}}
</div>
</template>

Why does OpenLayers-3 load too much map?

I am trying to load a map from my geoserver in a webpage, when it loads it almost doubles itself. The first map is a preview from the geoserver admin page, the second is how it loads it when pulled up on a webpage.
I ended up figuring it out by adding some properties into the layers here is my code:
mapInit: function() {
var _this = this;
this.map = new ol.Map({
target: 'mapdiv', //element to render in
interactions: ol.interaction.defaults({
shiftDragZoom: false,
altShiftDragRotate: false,
dragPan: false
}),
controls: ol.control.defaults({
attributionOptions: ({
collapsible: true
})
}).extend([ new ol.control.ScaleLine() ]),
renderer: 'canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://***.**.**.***:8080/geoserver/Global/wms',
params: {'LAYERS': 'Global Map', 'TILED': true},
noWrap: true, //<----added this
wrapX: false //<----added this
}),
//constrain the extent of the servable tiles to only 1 world's coordinates.
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34] //<----added this
})
],
Openlayers uses a tile system and the map will continually repeat itself in a web browser to ensure constant coverage and a seamless view that fills the screen/div. The easiest way to focus in on a specific area is with a zoom level.
var map = new OpenLayers.Map("mapdiv");
map.setCenter(new OpenLayers.LonLat(yourLong, yourLat), zoomLevel);
The code above would center on a specific area with a given zoom level as an int value. There are other ways to set the bounds and zoom here:
http://dev.openlayers.org/docs/files/OpenLayers/BaseTypes/Bounds-js.html

Categories