Related
we are experimenting with harp gl to replace a custom building tool for geojson. I want to visualize my polygons with the extruded polygon technique. Coming from MapBox GL I was able to have two properties on my geojson feature.properties called height and base height. So I have Some GeoJson that I'm using for testing. I cannot seem to get the extruded polygon to show up. I am writing this in Javascript, using the https://unpkg.com/##here/harp.gl/dist/harp.js source. I am able to render points on my map. Just not these polygons. (ignore the walls for now, I want to see the floors first)
What I would like to achieve (This is how it looks in MapBox):
function for reseting building data:
resetBuildings: function (data) {
const dataProvider = new harp.GeoJsonDataProvider("buildings", data);
var geoJsonBuildingDataSource;
if (this.mapView.getDataSourceByName("buildings") == null) {
geoJsonBuildingDataSource = new harp.VectorTileDataSource({
dataProvider,
name: "buildings",
styleSetName: "geojson",
});
this.mapView.addDataSource(geoJsonBuildingDataSource);
}
else { geoJsonBuildingDataSource = this.mapView.getDataSourceByName("buildings") }
const theme = {
styles: {
geojson: this.getStyleSet()
},
};
geoJsonBuildingDataSource.setTheme(theme);
My StyleSet definition(?):
getStyleSet: function(){
return [
{
when: ["==", ["geometry-type"], "Polygon"],
technique: "extruded",
renderOrder: 1000,
constantHeight: true,
color: "#FF0000",
transparent: false,
opacity: 0.8,
lineWidth: 1,
lineColor: "#003344",
height: ["number", ["get", "base_height"], 10],
floorHeight: ["number", ["get", "base_height"], 0]
}
];
}
My test GeoJson:
{"type":"FeatureCollection","features":[{"id":"6223a3f0-2835-4ad8-8456-3ccbefc0d19c","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.81047388530345,-36.909499151794726],[174.81050337403076,-36.90965937993286],[174.8107788255581,-36.909634193592254],[174.8107567090126,-36.9094734295196],[174.81047388530345,-36.909499151794726]]]}},{"id":"a0583d91-f038-4d6e-8e32-99db806982bc","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.909499687675165],[174.81075804940883,-36.90947396540121],[174.81078083615245,-36.90963526535126],[174.81050337403076,-36.909658844053574],[174.81049399125453,-36.909598825525144],[174.81050337403076,-36.909658844053574],[174.81078083615245,-36.90963526535126],[174.81075804940883,-36.90947396540121],[174.8104752256997,-36.909499687675165]]}},{"id":"ec219095-8891-440b-9fea-2db9cf74c7e0","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.8104752256997,-36.90950022355558],[174.81048594887454,-36.909558634520565],[174.8104752256997,-36.90950022355558]]}},{"id":"628a2754-c1b6-43a4-975b-eb45084d3853","type":"Feature","properties":{"level":1,"name":"base","height":0.2,"base_height":0,"color":"grey","message":"","coordinates":null},"geometry":{"type":"Polygon","coordinates":[[[174.8106367829821,-36.909648805405354],[174.81078191913713,-36.90963279956284],[174.81078129891483,-36.909646601064004],[174.81085540198825,-36.90961396183521],[174.81089173813234,-36.90967024159831],[174.81086324249378,-36.90968392941179],[174.8108926788683,-36.909721493301554],[174.8109264286474,-36.90971335389515],[174.81098518665493,-36.909814312925626],[174.81076392360183,-36.90990054860199],[174.81063578104482,-36.90969921056885],[174.8106354709525,-36.909651008673336],[174.8106367829821,-36.909648805405354]]]}},{"id":"d5a1c90d-295e-463b-9530-7643e411ca38","type":"Feature","properties":{"level":0,"name":"Wall","height":5,"base_height":0.2,"color":"blue","message":"","coordinates":null},"geometry":{"type":"LineString","coordinates":[[174.81063687126533,-36.909700434854784],[174.81076318373476,-36.90989889886059],[174.8109779359279,-36.90981381148965],[174.81076318373476,-36.90989889886059],[174.81063687126533,-36.909700434854784]]}}]}
Thank you in advance!
I figured it out. I was using the wrong kind of data source. I needed to use a FeaturesDataSource. My style set definition was also wrong, and I was not setting it to the map theme.
How I now initialize map:
this.styleSet = this.getStyleSet();
hereMapsHelper.geoJsonObj = JSON.parse(GeoJson);
const canvas = document.getElementById(mapContainerId);
var options = {
canvas,
theme: {
extends: "https://unpkg.com/#here/harp-map-theme#latest/resources/berlin_tilezen_base.json",
styles: {
geojson: this.styleSet,
}
}
}
var map = new harp.MapView(options);
function for buildings:
resetBuildings: function (data) {
var geoJsonBuildingDataSource;
if (this.mapView.getDataSourceByName("buildings") != null) {
var existingBuildingDataSource = this.mapView.getDataSourceByName("buildings")
this.mapView.removeDataSource(existingBuildingDataSource);
}
geoJsonBuildingDataSource = new harp.FeaturesDataSource({
geojson: data,
name: "buildings",
styleSetName: "geojson",
maxGeometryHeight: 30000
});
this.mapView.addDataSource(geoJsonBuildingDataSource);
},
Function to define style set:
getStyleSet: function () {
const color = new THREE.Color("blue");
const colorString = "#" + color.getHexString();
return [
{
description: "geoJson property-based style",
when: ["==", ["geometry-type"], "Polygon"],
technique: "extruded-polygon",
renderOrder: 1000,
height: ["number", ["get", "base_height"], 10],
floorHeight: ["number", ["get", "base_height"], 0],
attr: {
color: colorString,
transparent: true,
opacity: 0.8,
boundaryWalls: false,
constantHeight: true,
lineWidth: 1,
lineColor: "#003344",
emissive: colorString,
emissiveIntensity: 0.45
},
},
{
description: "geoJson property-based style",
when: ["==", ["geometry-type"], "Point"],
technique: "circles",
renderOrder: 2000,
color: "#00FF00",
size: 15,
}
];
},
This only renders floors, as I havent defined the style for the walls yet. But its progress!
I know this questions has been asked but the op didn't provide any code and I can't edit his answer obviously, so I'll start a new one. My objective is to replace the dot with a custom drop-pin marker that I will eventually have some other action for it. So as a kicker, such action must be identified somehow (perhaps and id) so that I can call it from jQuery, CSS, or javascript and give it some use.
Background:
I extracted the map of Pennsylvania from jVectorMaps and the code from the section that explains how to use marker images from this link marker-icons.
This is the original code:
$(function(){
var plants = [
{name: 'KKG', coords: [49.9841308, 10.1846373], status: 'activeUntil2018'},
{name: 'KKK', coords: [53.4104656, 10.4091597], status: 'closed'},
{name: 'KWG', coords: [52.0348748, 9.4097793], status: 'activeUntil2022'},
{name: 'KBR', coords: [53.850666, 9.3457603], status: 'closed', offsets: [0, 5]}
];
new jvm.Map({
container: $('#map'),
map: 'de_merc',
markers: plants.map(function(h){ return {name: h.name, latLng: h.coords} }),
labels: {
markers: {
render: function(index){
return plants[index].name;
},
offsets: function(index){
var offset = plants[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
series: {
markers: [{
attribute: 'image',
scale: {
'closed': '/img/icon-np-3.png',
'activeUntil2018': '/img/icon-np-2.png',
'activeUntil2022': '/img/icon-np-1.png'
},
values: plants.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
legend: {
horizontal: true,
title: 'Nuclear power station status',
labelRender: function(v){
return {
closed: 'Closed',
activeUntil2018: 'Scheduled for shut down<br> before 2018',
activeUntil2022: 'Scheduled for shut down<br> before 2022'
}[v];
}
}
}]
}
});
});
And this is my version which it does display the map, it does display the location, but only as a dot, not the marker. (See screenshot below) p.s. I don't care about the legend. I'm doing something else for that.
My code:
//------------- Vector maps -------------//
var prison = [
{name: 'Albion', coords: [41.890611, -80.366454], status: 'active', offsets: [0, 2]}
];
$('#pa-map').vectorMap({
map: 'us-pa_lcc_en',
scaleColors: ['#f7f9fe', '#29b6d8'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#fff',
regionStyle:{
initial: {
fill: '#dde1e7',
"fill-opacity": 1,
stroke: '#f7f9fe',
"stroke-width": 0,
"stroke-opacity": 0
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
}
},
markers: prison.map(function(h){ return {name: h.name, latLng: h.coords} }),
labels: {
markers: {
render: function(index){
return prison[index].name;
},
offsets: function(index){
var offset = prison[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
series: {
markers: [{
attribute: 'image',
scale: { 'active': '/img/map-marker-icon.png'},
values: prison.reduce(function(p, c, i){ p[i] = c.status; return p }, {}),
}]
}
});
My HTML:
<div id="pa-map" style="width: 100%; height: 470px"></div>
My CSS:
Irrelevant. I'll design accordingly later.
Thank you in advance!
To change dot to custom marker DEMO
If you read there source code they have option for initializing markerStyle in jvm.Map.defaultParam and for markerStyle you can define it as image or fill (switch case is used here) i think in jvm.Legend.prototype.render
They also has Some Event
jvm.Map.apiEvents = {
onRegionTipShow: "regionTipShow",
onRegionOver: "regionOver",
onRegionOut: "regionOut",
onRegionClick: "regionClick",
onRegionSelected: "regionSelected",
onMarkerTipShow: "markerTipShow",
onMarkerOver: "markerOver",
onMarkerOut: "markerOut",
onMarkerClick: "markerClick",
onMarkerSelected: "markerSelected",
onViewportChange: "viewportChange"
}
So here the code UPDATE you can also attach your function to onMarkerClick option
function doWhatever(event, code, obj) {
alert("Hello");
console.log(event);
}
var prison = [{
name: 'Albion',
coords: [41.890611, -80.366454],
status: 'active',
offsets: [0, 2]
}];
var ab = $('#pa-map').vectorMap({
map: 'us-pa_lcc_en',
scaleColors: ['#f7f9fe', '#29b6d8'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
backgroundColor: '#fff',
regionStyle: {
initial: {
fill: '#dde1e7',
"fill-opacity": 1,
stroke: '#f7f9fe',
"stroke-width": 0,
"stroke-opacity": 0
},
hover: {
"fill-opacity": 0.8
},
selected: {
fill: 'yellow'
}
},
markers: prison.map(function(h) {
return {
name: h.name,
latLng: h.coords
}
}),
labels: {
markers: {
render: function(index) {
return prison[index].name;
},
offsets: function(index) {
var offset = prison[index]['offsets'] || [0, 0];
return [offset[0] - 7, offset[1] + 3];
}
}
},
markersSelectable: true,
markerStyle: {
initial: {
image: "http://jvectormap.com/img/icon-np-2.png",
},
},
onMarkerClick: function(event, code) {
doWhatever(event, code, this);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css" rel="stylesheet" />
<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<script src="https://raw.githubusercontent.com/bjornd/jvectormap/master/tests/assets/us/jquery-jvectormap-data-us-pa-lcc-en.js"></script>
<div id="pa-map" style="width: 100%; height: 470px"></div>
I am trying to the style from configuration and return My code is like this.
qt = {};
qt.gpn = qt.gpn || {};
qt.gpn.StyleManager = function(opts) {
this.styleConfig = {
Polygon: {
layerStyle: function(feature, resolution) {
OpenLayer3 Style
},
legendText: [{
strokeWidth: ,
storkeColor: ,
fillColor: ,
displayText:
}, {
strokeWidth: ,
storkeColor: ,
fillColor: ,
displayText:
}]
},
Line: {
layerStyle: function(feature, resolution) {
openLayer3 Style
},
legendText: [{
strokeWidth: ,
storkeColor: ,
fillColor: ,
displayText:
}, {
strokeWidth: ,
storkeColor: ,
fillColor: ,
displayText:
}]
}
};
};
qt.gpn.StyleManager.prototype.getLayerStyle = function(layerId) {
get it from config and return the style
};
I want to create a method to get the style from styleConfig for the given layer id and return style in javascript. Can someone help me
I have drawn map using JVector map.And specified the custom marker as an image ('pin.png' specified in the code).There are seven markers and
I want to increase the size/zoom the marker when the region is selected.
function SetMap() {
var map = new jvm.Map({
container: $('#map_base'),
map: 'au_mill_en',
backgroundColor: '#ECF7FD',
markers: markers,
series: {
markers: [{
attribute: 'image',
scale: {
contact: 'assets/pin.png'// marker image set
},
values: values,
}],
regions: [{
values: {//color set for wach states/region
'AU-SA': '#FADCC2',
'AU-WA': '#D3E3F2',
'AU-VIC': '#E0EDD1',
'AU-TAS': '#EAE0E7',
'AU-QLD': '#FDEBBB',
'AU-NSW': '#28B6CE',
'AU-ACT': '#EAE0D6',
'AU-NT': '#EAE0D6'
},
attribute: 'fill'
}]
},
regionStyle: {
hover: {
"fill": '#F4A582'
},
},
markerStyle: {
selected: {
r:10
},
},
regionsSelectable: true,
regionsSelectableOne: true,
onRegionClick: function (event, code) {
}
//New South Wales seled as default as per requirement
map.setSelectedRegions('AU-NSW')
}
});
I am new to stackoverflow , so please point out any error in question format.
You can use the icon object and modify the icon size. You can find how to do that in the documentation. Complex icons are probably what you want. Hope this helps.
I am using the following code to initially construct a flot js graph
var plot = $.plot("#container", [{ data: sin},{ data: cos,yaxis: 2}],
{
series: {
lines: {
show: true,
fill: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
},
xaxis: {
mode: "time",
timeformat: "%d-%b"
},
yaxis: { position: "left",min: 0},
y2axis: { position: "right",min: 0,alignTicksWithAxis: 1},
zoom: {
interactive: true
},
pan: {
interactive: true
}
});
This allows me to zoom in/out as well as move around the graph. I've got an ajax call to update the axis and data on the graph which looks like below:
success: function(data){
var get = getDailyDataTEST(data, standard);
DaysGraphSRC.setData([{ data: get.gr1}, { data: get.gr2,yaxis: 2}]);
DaysGraphSRC.getOptions().xaxes[0].ticks = get.xaxis;
DaysGraphSRC.setupGrid();
DaysGraphSRC.draw();
}
Now my problem is that the zoom and pan don't get updated when new data is loaded. For example, If the user has zoomed in or moved somewhere on the graph and the ajax call updates the data the zoom stays on the same level. Any ideas on how to reset zoom and pan so that they fit the new data which is loaded?