There are several services to publish GIS data in the cloud without the need to know how to program, which allow us to view cartography on the internet and interact with the map and with the data.
However, these services have certain limitations: less customization, there is no possibility of including new tools, buttons or more from data sources or base maps, and control over the layers will be less.
An API such as Open Layers or Leaflet has a set of functions and procedures that are used to create powerful GIS applications.
To create a mapping web application we will need to write code. The languages that you need to know are HTML, CSS and JavaScript.
- HTML is the markup language for web pages and defines the structure of the content of a web page.
- What makes a web page beautiful? That is CSS (Cascading Style Sheets).
- JavaScript is the Web programming language for creating applications that run in the browser and give applications functionality.
HTML
HTML stands for Hypertext Markup Language.
A markup language is a programming language used for text to do more than just appear on a page; you can turn text into images, links, tables, lists, and much more.
Every web page you see is written in a language called HTML. Like any other language, it has its own syntax (rules for communication).
A web browser will transform our text written in HTML into a recognizable web page. The browser knows how to lay out the page, following the HTML syntax.
CSS
CSS (which stands for Cascading Style Sheets, or Cascading Style Sheets) is a language used to describe the appearance and format of your HTML.
A stylesheet is a file that describes what an HTML file should look like.
We say that these style sheets are cascading because the sheets can apply the format when more than one style applies.
The stylesheet.css file contains all the CSS styling information: where the HTML elements should go, what color they should be, what size they should be, and more.
CSS is a language widely used by web designers and in recent years it is being incorporated into the GIS world. Style editing in Map Box Studio Classic or Carto DB is done using Cartos.
As the name suggests, Cartos is like CSS, the language used to style HTML. Cartos is the CSS for spatial data.
Cartos is a language used by Map box Studio Classic to build the classic styles. Using Cartos we choose the colors, we apply a zymology depending on the zoom level, and in general we apply styles to the vector data.
Another example of using the CSS language is the possibility of giving zymology to the layers served by EServer by using the CSS plugin for eServer.
JavaScript
It is one of the most important programming languages. Why? Because the applications for the Internet and the Web are programmed in it.
JavaScript is the leading web interface language for creating applications that run in the browser, it is used on ~ 95% of web pages.
We could say that the relationship between JavaScript and web mapping is analogous to the relationship between Python and desktop GIS.
What can we use JavaScript for?
- To create websites that respond to user interactions.
- Create web mapping applications (Open layers, for example)
- Access information on the Internet (for example, find the most popular words on Twitter by topic)
- Organize and present data (for example, automate work on spreadsheets; or visualize data)
The industry standard for JavaScript libraries has been the Google Maps API.
However, open JavaScript libraries (Open Layers or Leaflet) are not subject to changes in the commercial solution payment plans.
We recommend you take a look at the post the best JavaScript APIs for web mapping.
Let’s see how the 3 languages are integrated into a single HTML file to create a web map application:
In the previous example, we see how the Leaflet libraries are added, a style is defined for the map (width and height) and in the script , that is, in the fragment reserved for the JavaScript code, a simple map is created.
Centered at latitude 41.66 and longitude -4.72, with a zoom level of factor 13 and including an OpenStreetMap layer.
You can see in more detail how to create a simple map, either with Open Layers 3 or with Leaflet.
In online courses of iPhone App Development and developing web mapping applications and web mapping viewers with Leaflet we teach you how to create and customize your own GIS applications on the web.
Server side rendering
As we have mentioned, today Google is capable of executing JavaScript code to understand the content of a SPA. So what can we do?
The solution is called server side rendering. Basically, it consists of the realization of a system by which the server is able to send an HTML with content for each application route.
The problem is that this solution usually forces us to double our work: in addition to building the entire application with client-side rendering, we will have to develop the entire server-side rendering.
That is why various frameworks have begun to provide solutions to mitigate this additional effort. This is the case of Angular Universal, for Angular applications, or NeXTs for SPAs created with React.
At this point it is also interesting to talk about isomorphic rendering, which allows you to use the same JavaScript code to render on the server side and on the client side.
Obviously, if our SPA requires SEO, it would be advisable to look for an isomorphic option, which will save us the need to completely double the cost of project development.
Although we can be blunt and confirm that if SEO is a priority it is advisable to avoid the SPA format, it is also true that everything has a solution. Today Google is even capable of executing some JavaScript on the website to better understand its content.
Fortunately, over the years, progress has been made in various solutions that can help achieve the desired positioning in a SPA.
Although we warn you, none of them are totally final and all require extra work to achieve those improved results.
This does not contribute much when it comes to knowing what is the matter that is discussed within this page and its keywords and, therefore…
