Related
Could someone help me out with what I am missing?
The scenario is: there are several nodes. Among them, one node can connect with 3 other nodes and those connections should be labeled.
The codes are connecting multiple nodes with labels, but on save it doesn't save the labels. On page load, it shows the connections but not the labels.
Here are my codes.
let connector = [
"EditableBezier",
{
cornerRadius: 0,
curviness: 30,
},
];
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let paintStyle = {
strokeWidth: 2,
stroke: "rgb(217,217,217)",
outlineWidth: 3,
outlineStroke: "transparent",
};
let hoverStyle = {
strokeWidth: 2,
stroke: "rgb(67,67,67)",
};
let abLabelCounter = 1;
function abSplitConnections(params) {
var source = params.connection.source;
var target = params.connection.target;
if (source.id === target.id) return false;
var conn = jsPlumb.getInstance();
let c = conn.connect({
source: source,
target: target,
editable: true,
anchor: "AutoDefault",
endpoint: "Blank",
connector: connector,
paintStyle: paintStyle,
hoverPaintStyle: hoverStyle,
overlays: [
[
"Arrow",
{
location: 1,
width: 10,
length: 10,
},
],
[
"Label",
{
location: 0.5,
label: () => {
if (abLabelCounter === 1) {
abLabelCounter++;
return "A";
}
if (abLabelCounter === 2) {
abLabelCounter++;
return "B";
}
if (abLabelCounter === 3) {
abLabelCounter = 1;
return "C";
}
},
id: "partition",
},
],
],
});
}
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'm trying to create one real-time flot and my problem is that I can't get to see the flot grid through the filling of my data's lines..
If you have any idea to get my filling a bit transparent like the picture below, I'd like to apply it as well on my Fiddle!
What I'm trying to achieve is something like that:
Picture of what I try to get
Here is the Fiddle on what I'm working:
My flot on Fiddle
Code:
$(function () {
getRandomData = function(){
var rV = [];
for (var i = 0; i < 10; i++){
rV.push([i,Math.random() * 10]);
}
return rV;
}
getRandomDataa = function(){
var rV = [];
for (var i = 0; i < 10; i++){
rV.push([i,Math.random() * 10 + 5]);
}
return rV;
}
getSeriesObj = function() {
return [
{
data: getRandomDataa(),
lines: {
show: true,
fill: true,
lineWidth: 5,
fillColor: { colors: [ "#b38618", "#b38618" ] },
tickColor: "#FFFFFF",
tickLength: 5
}
}, {
data: getRandomData(),
lines: {
show: true,
lineWidth: 0,
fill: true,
fillColor: { colors: [ "#1A508B", "#1A508B" ] },
tickColor: "#FFFFFF",
tickLength: 5
}
}];
}
update = function(){
plot.setData(getSeriesObj());
plot.draw();
setTimeout(update, 1000);
}
var flotOptions = {
series: {
shadowSize: 0, // Drawing is faster without shadows
tickColor: "#FFFFFF"
},
yaxis: {
min: 0,
autoscaleMargin: 0,
position: "right",
transform: function (v) { return -v; }, /* Invert data on Y axis */
inverseTransform: function (v) { return -v; },
font: { color: "#FFFFFF" },
tickColor: "#FFFFFF"
},
grid: {
backgroundColor: { colors: [ "#EDC240", "#EDC240" ], opacity: 0.5 }, // "Ground" color (May be a color gradient)
show: true,
borderWidth: 1,
borderColor: "#FFFFFF",
verticalLines: true,
horizontalLines: true,
tickColor: "#FFFFFF"
}
};
var plot = $.plot("#placeholder", getSeriesObj(), flotOptions);
setTimeout(update, 1000);
});
Thanks a lot!
You can use the rgba() color specification with flot to specify the fill color and alpha level (transparency):
fillColor: { colors: [ "rgba(179, 134, 24, .2)", "rgba(179, 134, 24, .2)" ] },
An alpha value of 0 is fully transparent, while an alpha value of 1 is fully opaque.
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>
Im using jvectormap to create a map and im trying to add links to the pins to link off to websites. Ive tried a few different things but nothing seems to be working. I currently have this:
$(function(){
var markers = [
{ latLng: [-35.727014, 174.320861], name: "Whangarei", image: 'pin.png', style: {image: 'themes/startertoplight/img/pin.png'} },
];
/* map parameters */
var wrld = {
map: 'nz_mill_en',
backgroundColor: '#28343B',
onRegionClick: function(event, code) {
if (code === 'Whangarei') {
window.location = 'http://www.google.com'
}
},
zoomButtons: false,
zoomOnScroll: false,
focusOn: {
x: 0.3,
y: 0.7,
scale: 3
},
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
markers: markers,
};
$('#nz-map').vectorMap(wrld);
});
Any idea how i can get this to work? Thanks