Exporting geojson mapbox shapes to mango db? - reactjs

I am working on a project where a user can outline an area in a map provided by mapbox. I would like to make it so that once the person saves their progress they can log out and log back in to find the area they outlined still there.
I would like to know how I can export a geojson file to my server. If it matters, I am using mango db.
Also, I am using React JS.

You can serialize the geojson feature to string and then store it in a string type column of your DB
JSON.stringify(feature, null, 2);

Related

How do I save rich text editor data to DRF - postgresql database and display in React

I want to develop a blog application with Django backend and React frontend. I shall be using Postgresql.
I want to use a rich text editor like Quill to write the blog article. My questions:
I heard that article written in a text editor needs to be converted to HTML before saving in the database. If so, how do I do this in Django Rest Framework?
How do I present the article keeping the same style and formatting in the frontend from the database?
Say, I include multiple photos in the article. How do I save all the photos in the database? i.e. what should be the schema then?
I want to have my doubts clear before I jump in.
I'm also doing the same thing at the moment. For your answers :
In DRF, the simplest way to post the data is by using Textfield in your model. Rich text field (with Tags) will be stored in the Postgres. In the Admin page or the DRF API you'll see something like this
Then, to re-render it to the front end, you can use any HTML Parser library. for example I'm using "react-html-parser" that simply convert the rich text into the defined styling.
As for Image, this is a bit tricky, and I havent done this part myself but what i could think of right now is you would create another model & end points to store the images.
when sending the post request to the django, you would convert the base file path/url from the front end to back end. example :
original > http://localhost:3000/image/efewf23r.jpg
new (django) > http://localhost:8000/media/img/img_model/efewf23r.jpg
then do a second post request to the image itself and make sure django would rename the the file as per what we set above.
Let me know if you found a better solution.
It's been long since I posted this question. After that, I have gained enough working knowledge to make Quill.js (the rich text editor I'm using) work with React.JS, or, in my case Next.JS. So, this is focused on Quill.js only. The Quill npm package more specific to ReactJS is react-quill. I am presenting it as beginner friendly as possible.
A built-in function is provided with Quill: editor.getHTML(). editor is the current editor instance, where one types the content. This method generates the innerHtml of the content one prepares in the editor.
To save it to the databse, simply POST it to your back-end. But you must sanitize this innerHtml before passing it to the database. Can't say about server-side but I had to do this sanitization on the client-side. One good package is DOMPurify. You need to save this to the database if you want to present it in the same manner as it was typed in the browser.
The first point also provides the solution to my 2nd question. But one important point: The content one writes in Quill editor is also available as a JSON like format called quill-delta. You can get the delta with the function editor.getContents(). You need to POST it to the database if you want to edit the content in a later time.
To edit, you need to get this delta from the database and then initialize Quill editor with this delta in the value attribute.
For example, the text in orange is the delta representation of the text in the editor:
codepen source.
There is another function editor.getText() which extracts all the text from the editor.
Photos. Generally in Quill, you simply put the photo in the editor and Quill generates a base64 encoded delta for the photo. It's this easy. You don't need to worry about separate image fields.

2sxc and Google Maps

I have a table of geocoded data in a DNN database: several columns of data plus latitude and longitude.
I want to create a Google Map and put markers on the map that correspond to the items in the data table.
I have a SQL data source set up, and can get the geocoded data into the razor script, produces tables, etc.
I can create the Google Map, and put markers on it appropriately, but only if the marker data is hard-coded into the javascript that creates the map.
Where I am having conceptual trouble is getting the geocoded data into a form where the javascript can use it. Can someone help me with that part?
Thanks.
I guess the core question is how you store your coordinates - whether you have each number in a field or joined. I would basically follow the example of the map in the default bootstrap 3 templates - here's a link, but I recommend that you install the default templates to see how it's built:
https://github.com/2sic/2sxc-content-bootstrap3/blob/master/_Location%20-%20Full%20Size%20Map.cshtml

Custom tile server - how to create a layer using Mapnik and mod_tile using POSTGIS db

I have created a Ubuntu 14.04 tile server.
I loaded an OSM base map into the POSTGIS database and created a slippy-map using OpenLayers 3.9.
Then I loaded data of an overlay into the POSTGIS database and now I am trying to create a layer for it.
To create layers, the only solution with decent documentation seems to be Tilemill.
But to use Tilemill on my server I have to use "SSH connection forwarding", explained here.
I don't want to create a security leak into my server.
Are there any other options, with decent documentation, with which I can create custom layers for my map?
What I already 'know':
Create a simple map with Mapnik
Store shape files into the POSTGIS database
Use OpenLayers to display the layer
What I need to know:
I have a simple overlay (created with Mapnik):
This overlay has to be rendered into different tiles and have zoom levels, just like a OSM base map. I want to use this overlay and put it over an area on my OSM-tiled map.
What do I need to be able to create a layer that can be displayed with OpenLayers like:
url: '/overlay/{x}/{y}/{z}'?

Mabox Outdoors custom style with Mapnik

I am trying to set up a tile server with Mapnik, renderd, mod_tile and with MapBox Outdoors style. I've been able to successfully go through https://switch2osm.org/serving-tiles/manually-building-a-tile-server-14-04/ tutorial and set up the server with OSM-Bright style.
Next I changed renderd.conf file and pointed the 'XML' property the 'project.xml' file from MapBox Outdoors style which I previously downloaded from Github. I've also cleared the cache, restarted renderd and apache but the new style does not work - there are only empty tiles rendered.
Is there something that I'm doing wrong? What is the proper way to apply Outdoors style?
The Mapbox Outdoors style is not compatible with the OSM Bright process described by switch2osm. It is designed to be uploaded to a Mapbox account, not to be used with a custom mod_tile setup. The style as-is relies on data in the form of vector tiles served from the Mapbox API (which requires an account / API key and is subject to certain conditions).
It would be possible to modify the source code to work with a custom database for you to use it in your own tile server setup, but you would need to make sure your layer definitions are compatible with the descriptions at https://www.mapbox.com/developers/vector-tiles/mapbox-streets/ and https://www.mapbox.com/developers/vector-tiles/mapbox-terrain/.

How to save esri map as an image file

I am using Silverlight 3 and I am trying to take a screenshot of esri map.
I was able to take a screenshot and save as a file for silverlight controls, but when I try to access Esri map image, I get "Pixel access not allowed" error. I heard this is because of different domain (I am trying to get map image on the client side, and map image is not accessible at server side in my silverlight application).
So I am trying to find a function from esri so that I can save the map image as a file.
does anybody know how to do this? or any other way around?
I am using a script from the Code Gallery for both printing and exporting map images.
The script requires a little bit of tweaking to get it to work (plus you need to dig a little bit into WCF and self-hosted services), but it has been working great for several months now. You can see it in action at our web site.

Resources