How to change Point map point marks to svg icon in the geo graph


#1

Hi mapd team , i am created the mapd “Pointmap” chart , but there is showing default point icon with different color but i need to change instead of point icon i need to show my svg icons, there is any way to change markers in the map, if its possible please let me know thank you…for the reference i attache my pointmap image is there please have a look.


and one more thinks i know Vega marks supported in the image, svg path also (https://vega.github.io/vega/docs/marks/), but mapd with Vega will support the “points,symbol,polys” and circle,squre shapes only,how can i archive in svg or image in this marks fields…


#2

At this point there is no support for custom images/SVGs to use as markers, tho we have plans to support them in the future. Unfortunately it is not currently considered a high-priority item, so arrival of such a feature is probably several months out.

The only options for markers at this point are circles, squares/rectangles, cross, diamond, triangles, and hexagons.


#3

@vastcharade Thank you for the response,Then mapd will provide the vega rendering api for rendering the backend table to fronted image using browser-connector, it was awesome job, but its rendering image was PNG image , but that is not good resolution like a vector images, so there is any way to change instead of PNG to SVG image generation in the front end side,if its possible its a good news for me,if i need to change anything in server side for the svg rendering please let me know, or share the link or documentation where i need to work on that.Thank you…


#4

A png is the only format available for backend-rendered images. If you’re only concerned about rendering a small amount of data, which your image suggests, then you could certainly render the visualization on the frontend and use the browser to render your svgs.
Our bubble chart is done this way. The docs are here: https://www.mapd.com/docs/latest/immerse-user-guide/immerse-chart-types/#bubble-chart
and the primary rendering code for the bubble chart is here:
https://github.com/mapd/mapd-charting/blob/master/src/charts/bubble-chart.js#L385
The bubbles are rendered as svg circles, so you could easily swap that out for a different svg.


#5

If you want the svg rendered on a map, that will require more customization by combining our map mixin (https://github.com/mapd/mapd-charting/blob/master/src/mixins/map-mixin.js) with the bubble chart. Principally that involves swapping out the coordinate grid of the bubble chart with the map mixin. See: https://github.com/mapd/mapd-charting/blob/master/src/charts/bubble-chart.js#L37 for where the coordinate grid is mixed in. The map mixin would need to be used instead. There’s more work that’s needed to properly combine those two, but that would get you started if you felt like trying to merge the two.

Good luck.


#6

@vastcharade Thank you for your suggestion and link i will gone through the documentations…


#7

@vastcharade we have million rows data so frontend svg handling will go to browser hang i tried that one also ,one more question for you, actually we are using Vega api to rendering the frontend image for SVG and map,as per the mapd documentation mapd using vega rendering api to get the base64 image using mapd-connector.js in the script rendervega class will return the PNG base64 image response, if its possible we can customize the rendervega class to svg return base64 image generation.i searched in the mapd-connector.js its sending only the json to the client then return the base64 response,there is any way we can change instead of PNG to SVG base 64 response , where i need to look on that if its possible.Thank you.


#8

Unfortunately this is not possible as our backend rendering engine is not open sourced. And even if it was, such a change is not trivial. Hopefully we’ll start working on custom svg sooner rather than later. But it will be at least a couple months out.

We’ll let you know.

Thanks for your interest.


#9

@vastcharade Thanks for the Information , and one more think as per your mapd blog post "https://www.mapd.com/blog/2017/07/22/vega-makes-visualizing-big-data-easy/ "they mentioning the geo map with vega PNG rendering how can i implement that, if i use the domain and data i get the plain PNG image only

not like that geo image with points like that if its canvas we can use either cross filter or d3 library for rendering geo map we can get that visualization ,could you tell me how i can achieve such kind of PNG with geo map and another question if i have a PNG image i can get data from the click event of the Image if it’s please let me know ,Thank you…waiting for your Response…


#10

We use a hybrid rendering technique for geo maps. The PNG that’s rendered on the backend is composited over a basemap rendered in the browser. We use mapbox as our preferred map renderer on the frontend. If you’re creating your own client, I’d recommend looking into mapbox. It supports a number of default styles, including a satellite look, but you can also customize your map style. Otherwise, if you’re using immerse, just create a pointmap and set the Map Theme to Satellite if you want that specific style.


#11

Ok, but i have a million record in my Database if i render the all the data in the Front-end side my browser will go to hang , so my application wont be work properly , so i planed to use vega for rendering the Image like a kb size of data only ,so my application will be work as its,could you tell me how we can archive map as a image data, there is any possibility, even Vega canvas taking data from either csv or json file only, even i use the canvas same issue will happen to me.could you give any suggestion of its.Thank you.


#12

And one more think if i create the Mapd immerse pointmap, there have only share facility, i need to make multi tenant functionality , user based , if its possible in mapd immerse.


#13

You would want to backend render your 1 million records, and then composite the resulting PNG on the frontend over a map rendered on the frontend (again, we use mapbox)


#14

Yes , you are correct, mapd is doing backend side perfect, and now front-end i need to make as my scenario that was the issue on me.


#15

@vastcharade , Thank you for the Guidance And I have a another query Regarding to the issue, i have geo map based PNG image rendering from Vega,Then i converted the image to canvas for rendering the Pixel size of the Click Event, Now We can able to bind the same co-ordinate Canvas image with any geo map Canvas Right, as per your suggestion i looked on the mapbox But they taking data from either geo co-ordinate or geo-json, but in my case i don’t have such kind of data what i have to do bind Canvas with geo canvas, could you give any idea, regarding such scenario,Thanks Advanced.


#16

Sorry, I just don’t understand what you’re trying to do here. Could you give me a better explanation? I might be able to assist you then.
First of all I don’t understand what you mean by “Then I converted the image to canvas for rendering the Pixel size of the Click Event”. Are you using HTML canvas to display the backend-rendered image in the browser?
Secondly, I don’t understand “i looked on the mapbox But they taking data from either geo co-ordinate or geo-json, but in my case i don’t have such kind of data what i have to do bind Canvas with geo canvas”. What are you trying to do here? Are you trying to take that HTML canvas object and composite it over mapbox?


#17

Ok,for the reference i pasted my Json Object

con.renderVega(1, JSON.stringify(exampleVega()), vegaOptions, function(error, result) {
if (error)
console.log(error.message);
else {
var blobUrl = data:image/png;base64,${result.image}
var body = document.querySelector(‘body’)
var vegaImg = new Image()
vegaImg.src = blobUrl
vegaImg.setAttribute(“id”,“vega”);
body.append(vegaImg)
document.getElementById(‘vega’).addEventListener(‘click’, function (e) {
var canvas = document.createElement(‘canvas’);
canvas.width = vegaImg.width;
canvas.height = vegaImg.height;
canvas.getContext(‘2d’).drawImage(vegaImg, 0, 0, vegaImg.width, vegaImg.height);
var pixelData = canvas.getContext(‘2d’).getImageData(event.offsetX, event.offsetY, 1, 1).data;
console.log(“pixelData :” + pixelData);
});

Here I am changing the PNG Image to Html Canvas,Then i need to bind this canvas to geo map Canvas , its possible??
In second Your Question: Are you trying to take that HTML canvas object and composite it over mapbox?
Yes, i am trying this one only.


#18

I know this not good way to approach the geo map in front end , But Right Now i don’t Have any other option for its…


#19

Although you could probably get it to work this way, mapbox has APIs for adding both images and canvas objects, so you don’t need to necessarily
Images: https://www.mapbox.com/mapbox-gl-js/api/#imagesource
Canvas: https://www.mapbox.com/mapbox-gl-js/api/#canvassource

Mapbox currently does not have a way to “update” the image of its image source, so we’ve had to add modify mapbox’s source to allow for an image update. You can start by removing the image source and adding a new one when the image changes, but you may notice “popping” when doing this.

The CanvasSource may work appropriately with updates because you can update the canvas image source on your own. I have not tried this tho.


#20

You can then position the image/canvas in the appropriate position using the “coordinates”. What we do is ensure that those coordinates match the bounds mapbox render. See: https://www.mapbox.com/mapbox-gl-js/api/#map#getbounds

Something like this should work. Of course, make sure the bounds of mapbox is used in the vega so things line up appropriately.

Good luck