Svg worldmap example


Содержание

Бесплатные векторные карты мира (AI, EPS, SVG)

Каждому желательно под рукой иметь карты мира в векторном формате – это отличное дополнение к набору инструментов каждого дизайнера.

Сегодня мы хотим поделиться с вами отличной подборкой современных карт мира в векторе.

Теперь у вас есть возможность использовать бесплатные карты мира в популярных форматах EPS и AI (к тому же, в эту подборку мы также включили карты в формате JPEG). Не забудьте создать закладку на эту подборку.

Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

30 образчиков инфографики на тему чемпионата мира-2014, проводимого FIFA

15 тем оформления Andro >

Более 50 бесплатных PSD-образцов дизайна карт и объектов навигации («булавк .

Node.js для новичков: как установить программу и создать файл уровня «Hello .

28 бесплатных векторных карт для использования в ваших проектах

Карты мира оригинального дизайна. Смотрите и вдохновляйтесь

35 оригинальных веб-дизайнов с векторными иллюстрациями

JQVMap: векторные карты на JQuery

Информационный шаблон «the world» для DataLife Engine

35 необычных произведений графики на тему конца света

  • 26.10 | 18:00 —

Топ UX тренды для банкинга в 2020 году

Армированный скотч — назначение и характеристики

2009—2014 © CoolWebmasters.Com — онлайн-журнал для профессиональных веб-дизайнеров и разработчиков. Все права защищены.
Наш онлайн-журнал предоставляет самую свежую и актуальную информацию для профессиональных веб-дизайнеров и разработчиков в виде переводов статей и новостей, полученных с зарубежных информационных ресурсов. Дизайн и разработка сайта — лаборатория D.L.E. Templates.Com

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на наш сайт!

Мы сами вдохновляемся материалами, которые предлагаем вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, сниппетов и т.д.), и мы всегда сохраняем ссылки на источники, и сообщаем авторов изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но мы ведь не волшебники, чтобы угадывать, кто является автором.

Если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые мы здесь предоставляем, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то этому энтузиасту придется самостоятельно искать настоящего автора материала.

HTML и SVG: создаём интерактивную карту

Давайте создадим интерактивную карту. Чего-нибудь. Что значит интерактивную? Ну, она должна взаимодействовать с пользователем и с данными на веб-странице, на которой она расположена. Думаю, этого достаточно, чтобы считать её интерактивной.

Что же, и возьмём мы SVG. Почему? Да потому что с ним легко работать человеку, знакомому с HTML. SVG — это векторный формат, основанный на XML. То есть у SVG-рисунка есть своя DOM, к различным элементам можно применять CSS-правила и управлять старым добрым JavaScript’ом.

Что же, начнём?

Самые нетерпеливые, могут сразу посмотреть демо, но я предлагаю читать обо всём по порядку.

Готовим карту

Для начала нам нужна суть. То бишь сама карта. В случае, если гугл не помогает, то её можно нарисовать и самому, даром что в Inkscape это сделать не трудно.

Я же, к примеру, возьму карту одной круглой страны (исходник на Wikimedia Commons)

Поскольку, по моему замыслу, у областей карты не должно быть различного окраса, то вначале я вырезаю из интересующих меня тегов

стили fill и stroke, зато взамен даю этим элементам нужные мне >
Далее, в секции изображения помещаем до боли знакомое:

Вот и обещанный мною CSS в действии. В принципе, этого уже достаточно. Diff.

Вставляем SVG в HTML

Достаточно подробно этот процесс был освещён в хабратопике К вопросу о кроссбраузерном использовании SVG.

Мы же будем использовать HTML5 и воспользуемся самым простым, гуманным и стандартным способом:

Все браузеры, поддерживающие SVG, его корректно «скушают» и покажут. И даже дадут нам с ним поработать. При одном условии: если веб-сервер отдаст его с MIME-типом image/svg+xml. Другой MIME-тип может очень смутить Google Chrome (но не Оперу, которая из тега твёрдо знает, что идёт за SVG и на провокации не поддаётся).

Второй правильный метод — вставка SVG-кода прямо в HTML. Великолепно с точки зрения скриптинга, но поддержка браузерами пока похуже. Кстати, заметьте, что SVG, вставленный в «либеральный» HTML, всё-таки остаётся «суровым» XML’ем. Так что кавычки и закрывающие теги обязательны.

Подводные грабли

Но не всё так просто. Сразу можно заметить, что браузеры упорно не хотят масштабировать нашу карту, а если она не влезает, то показывают полосы прокрутки, вот так:

Чтобы заставить браузеры работать с SVG так, как мы ожидаем, следует убрать в SVG-файле из тега атрибуты width и height (или задать им значения в 100%), а вставить специально предназначенный для браузеров атрибут viewBox со значениями координат левого верхнего и правого нижнего углов изображения:
Diff.

После этого ситуация значительно улучшается, но другую граблю нам подкладывает Google Chrome: он упорно стремится смасштабировать картинку по высоте до высоты элемента , а не увеличить высоту согласно ширине тега и пропорциям изображения, как ведут себя остальные браузеры.

Жаль. Придётся привлечь JavaScript и подогнать высоту элемента вручную.
Diff.

Взаимодействуем с SVG

Чтобы нам взаимодействовать с SVG, вписаннным прямо в HTML, ничего не нужно — он уже часть DOM веб-страницы.

Получить доступ к SVG, вставленным через чуть сложнее:

Да, jQuery работает с SVG, но только частично. Например, я заметил, что не работают функции addClass и removeClass, а так же поиск по классам ( jQuery(«.class») ). Приходится извращаться.

Free Vector World Maps

This is a pack of 30 different world maps in scalable vector graphics (SVG) format.

You can easily edit and customize the world maps using a vector graphics editor like Illustrator, Sketch, or Inkscape.

Also, the maps are ready and optimized for Web use. This was done by simplifying country borders to reduce each map’s file size.


This freebie was created exclusively for Six Revisions readers by SimpleMaps.

Preview

Natural Earth Map Projection

Natural Earth Map Projection (Joined)

These world maps vector files can be used for free as part of your projects, even if said project is commercial in nature. Examples: Websites, apps, infographics, desktop software, etc. However, you cannot sell, bundle, or redistribute the contents of this freebie in whole or in part. See the README.txt file included in the world map package for more details on license/terms of use.

Technical Details on the World Maps

This free set of world maps uses the common map projections.

There are many ways to project a 3-dimensional world into 2-dimensional space. These methods are called map projections.

There were 15 map projections used. And each map projection was used to generate two different versions of each world map, for a total of 30 scalable vector world maps.

The first version of a map project includes 211 distinct countries that are conveniently identified in the SVG files by their 2-letter country code (based on ISO 3166). This can open up many possibilities for all sorts of user interaction, web design customization, and programmatic manipulation through, for instance, CSS and JavaScript.

The 2-letter country ISO codes are specified through the data-id and id attributes of the SVG path elements. The country name is specified in the data-name attribute.

The second map removes all internal borders creating a silhouette of the world. This could be a good option for backgrounds where you’re more interested in a more generalized visual scale. The vector file names of these map versions are affixed with the term _joined . An example: natural_earth_joined.svg.

World map projections used for these world maps are: Equirectangular, Cylindrical Equal-area, Mercator, Natural Earth, Robinson, Eckert IV, Sinusoidal, Mollweide, Wagner IV, Wagner V, Canters Modified Sinusoidal I, Goode Homolosine, Hatano, Winkel 3 and Aitoff.

Chris Youderian is a web developer living in Cincinnati, Ohio. He’s the founder of SimpleMaps, an interactive map library and customization tool. Follow him on Twitter

We’ve driven over 4 million leads for clients in the last five years.

Svg worldmap example

Upgrade your inbox and get our editors’ picks 2× a month — delivered right into your inbox. Earlier issues.

Interactive maps are a fantastic way to present geographic data to your visitors. Libraries like Google Maps and Open Street Maps are a popular choice to do this and they excel at visualizing street-level data. However, for small-scale maps, SVG maps are often a better option. They are lightweight, fully customizable and are not encumbered by any licensing restrictions.

It’s possible to find a number of SVG maps released under permissible licenses in the Wikimedia Commons. Unfortunately, it’s likely that you will eventually find these options lacking. The map you need may not exist, may be out of date (as borders change), or may not be well-formatted for web use. This article will explain how to create your own SVG maps using Natural Earth data and open source tools. You will then be able to create SVG maps of any area of the world, using any projection, at any resolution. As an illustration, we will create an SVG world map.

Илон Маск рекомендует:  Шаблон сайта блог HTML, CSS, 1 страница

Further Reading on SmashingMag:

The process will require us to:

  • Download geographic data from Natural Earth data
  • View and edit the geographic data using QGIS
  • Convert the geographic data into SVG using Kartograph.py

Getting The Geographic Data

To start, we need geographic data for country borders. This data is available from Natural Earth. Natural Earth is built by volunteers and supported by the North American Cartographic Information Society. It specializes in small-scale maps that are well-suited for the web. This means the maps will look great at the country or province level, but aren’t of a high enough resolution to show the neighborhoods of a city. Natural Earth releases its maps into the public domain.

To see all maps available for download, view the Natural Earth downloads page.

Many borders in the world are hotly contested. Natural Earth’s policy is to draw borders based on who controls the situation on the ground. We will be primarily working off of a small-scale cultural map, which contains all 247 countries in the world, and has boundary lakes removed. You can download it as a zip file (186KB).

The data you download is stored in the shapefile (.shp) format. Shapefile is an open standard geospatial vector data format created by Esri. The shapefile is accompanied by complementary files with the following extensions: .dbf, .prj and .shx. Together, these files contain the vector geometry, attributes ( name , id , etc.) and geospatial information for each country. For simplicity, when people refer to a shapefile, they are really referring to this group of files.

Viewing The Geographic Data

To see the data we just downloaded, we need to use GIS (geographic information systems) software. QGIS is open source GIS software. It runs on Linux, Mac OS X and Windows. Download it from QGIS. This tutorial will be using QGIS 2.8.2 Wien.

After you have installed QGIS, open the QGIS Desktop application. QGIS is a powerful program that can work with many types of geographic data. Because of this, it can be quite intimidating. We’ll only be using a small fraction of its functionality and can ignore much of what QGIS offers. For example, since we aren’t working with any raster images (like satellite photography), we can ignore tools related to raster images.

To get started, we’ll add our shapefile as a vector layer to our project.

  • Select Layer → Add Layer → Add Vector Layer (from the menu bar)
  • Browse to and open _ne_110m_admin_0_countrieslakes.shp
  • The map should appear in the window (it may be a different color for you)

The world map vector layer. (View large version)

Notice that _ne_110m_admin_0_countrieslakes.shp has been added to the Layers dialog.

Layers in QGIS are similar to layers you find in photo editing software like Photoshop or GIMP. You must select a layer before you can work on it. As you go through this tutorial, if you find a tool isn’t working properly, you have likely neglected to select the current layer.

It’s also possible to hide layers from view by unchecking the box. This allows you to add multiple shapefiles to your project and view them individually.

After adding a vector layer, it’s a good idea to save your work: Project → Save

Each country contains a list of attributes. You can view these attributes in a table: Layer → Open Attribute Table

The country attribute table. (View large version)

The Natural Earth data contains a wealth of information about each country. We’ll be using two-letter ISO codes to uniquely identify countries. These are stored in the iso_a2 variable. We’ll also use the country name ( name ) to label countries in our SVG file. Feel free to explore the table to get a sense of the data. When you’re done, close the table.

Editing The Geographic Data

(You can skip this section if you are happy with the Natural Earth data defaults.)

It’s possible to edit the individual geographic shapes using QGIS. You will probably not need to redraw borders, but you may want to split a country into parts.

Each shape in our shapefile is referred to as a feature in QGIS. To select a feature, choose: View → Select → Select Feature(s) and then click on your target. The entire feature should turn yellow. For example, this is what France looks like when you click on it:

France is selected and highlighted. (View large version)

Notice that France includes French Guiana in South America. This is because French Guiana is an overseas département and region of France (French Guiana on Wikipedia). Nonetheless, French Guiana has its own unique ISO code and, for many applications, it makes sense to display it as a separate entity.

Splitting France into two separate entities is a straightforward process, but it requires a number of steps:


  1. Install the Digitizing Tools QGIS Plugin:
    • Plugins → Manage and Install Plugins
    • Search for Digitizing Tools
    • Select Digitizing Tools
    • Install Plugin
  2. Display editing tools in the toolbar: View → Toolbars → Advanced Digitizing; and View → Toolbars → Digitizing Tools
  3. Put the map in edit mode: Layer → Toggle Editing
  4. Select France: View → Select → Select Feature(s)
  5. Click on France in the map view
  6. Choose Split selected multi-part features to single part from the toolbar.

This will split all parts of France into separate entities.

  • Put France back together:
    • Select both the mainland of France and the island of Corsica. To select multiple features, hold down Ctrl (Cmd on Mac).
    • Merge the mainland of France and the island Corsica (Edit → Merge Selected Features) – you will be alerted that the feature attributes will also be merged. Click OK.
  • Edit French Guiana’s attributes:
    • View → Identify Features
    • Click on French Guiana. This will bring up the attributes for French Guiana. It currently has the attributes for France. We need to replace these with attributes for French Guiana. Click on the Edit feature form icon as shown in the screenshot. Replace the ISO code with “GF” and the name with “French Guiana”.

    Replacing French Guiana’s attributes. (View large version)

  • Save your changes: Layer → Save Layer Edits
  • That’s all! French Guiana is now its own feature and we’ve given it unique attributes. To learn more about editing, check out the QGIS documentation.

    Creating SVG Files With Kartograph.py

    Kartograph.py is a lightweight Python library that will convert our shapefile into a web-friendly SVG file. It was created by New York Times graphics editor Gregor Aisch and is available under an AGPL license.

    To install Kartograph.py, follow these installation instructions. This process will require you to install a number of dependencies. If you’re not ready to commit to so many installations, you can install Kartograph.py in a virtual machine. Or, you can just download the SVG output shown as images in this article. This tutorial was created using Kartograph.py installed in Ubuntu 14.04 LTS.

    Kartograph is a command line program that requires a JSON configuration file. Name this file config.json and place it in the same directory as the shapefile. This file must contain a layers property with a dictionary of the layers we want to convert and the location of each layer’s shapefile. To convert _ne_110m_admin_0_countrieslakes.shp we can use the following config.json:

    Then execute the following Kartograph command in the console:

    Kartograph will create _worldbasic.svg in the current directory. If you open this file in a modern browser, you will see a map of the world.

    See the Pen gaOXNv by Smashing Magazine (@smashingmag) on CodePen.

    See the Pen gaOXNv by Smashing Magazine (@smashingmag) on CodePen.

    Changing The Map Projection

    You may notice that this map looks somewhat different from the map in QGIS. There are a number of different ways to project our three-dimensional Earth into two-dimensional space. By default, Kartograph uses the Robinson projection, an aesthetically pleasing projection commonly used for world maps. However, you may prefer to work with the Mercator projection (used by Google Maps) which projects latitude and longitude as straight lines. To do so, add a proj object after the layers object in the config.json file:

    Reducing The File Size

    Often, the SVG file you create may be too large to be practical for web use. Kartograph includes the Visvalingam-Whyatt simplification algorithm. This tool makes it possible to dramatically reduce the size of a file with only subtle visual changes to country borders. Our file is already quite small (231KB), but we can simplify it further by adding a simplify property to the end of the countries property:

    The higher the value of simplify , the more country borders will be simplified and the smaller the file will become.

    Filtering Out Features

    By default, the map will include all the features present in the shapefile. You may, however, want to exclude certain features from the SVG file. For example, we may wish to remove Antarctica since it is of less relevance to our task. Kartograph includes a filter tool that makes it possible to filter features based on their attributes. We can exclude Antarctica using its ISO code. To do this, add a filter property to the countries layer:

    Saving Data Within The SVG File

    Finally, we want our SVG map to include data attributes with each country’s ISO code and name. This will allow us to identify SVG elements in the browser. To do this, add an attributes property to the countries layer:

    Putting It All Together

    After making these changes, config.json will consist of the following:

    Execute the same Kartograph command as before (with an updated file name):

    Kartograph will create a new map world.svg that is smaller and looks quite different:

    See the Pen LpYOob by Smashing Magazine (@smashingmag) on CodePen.

    See the Pen LpYOob by Smashing Magazine (@smashingmag) on CodePen.

    If you open this file in a text editor, you will see that each

    now includes identifying data in the following form:

    This introduction only scratches the surface of what is possible with Kartograph. You can use multiple layers, join features together, and frame the map using latitude and longitude. You can learn about these options and more in the Kartograph.py documentation.

    Adding The SVG Map To A Website

    Now that you’ve created an SVG map, you’ll probably want to customize it and add it to your website. Modern browsers support SVG natively so you can add an SVG image to your webpage just like you would add any other image:

    However, embedding the map this way makes it difficult to style the map and make it interactive. A simple way to apply CSS and JavaScript to the map is to first embed the SVG file inline. Simply open world.svg in a text editor, copy the entire element, and paste it directly into your webpage.

    The element contains a separate

    for every country. To style the map, simply apply CSS to all

    elements. Use the fill and stroke properties to style each country’s color and border respectively. For example, we can make all countries light gray and add a hover effect:

    Similarly, we can use JavaScript to define event handlers. The following snippet will alert each country’s name with a click:

    This should be placed after the inline element and right before the closing tag. Your full HTML file should look like the example provided in this Gist.

    Open this file in a browser, and you should see an interactive map of the world.

    Hopefully, this simple example illustrates how you can easily manipulate your SVG map with JavaScript and CSS. For more advanced interactions, such as animating SVG paths, check out an SVG JavaScript library like Snap.js.

    Conclusion

    Interactive maps can be intimidating, but they don’t have to be a black box. You can create your own custom SVG maps with open data and software. In no time at all, you will have enhanced your website with a beautiful, fully customizable, interactive map.

    How to create pure react SVG maps with topojson and d3-geo

    Since d3 has been split into smaller components in v4, pairing it with react has become more streamlined. Making declarative SVG maps with react, topojson, and d3-geo has never been easier.

    This article will show you how to create pure react SVG maps with topojson-client and d3-geo. The techniques outlined here will help you make your own reusable SVG mapping components.

    What this article covers


    1. The anatomy of an SVG map independent of react
    2. Structure of example app and npm dependencies
    3. Loading topojson and rendering a basic SVG map with react and d3-geo
    4. Adding events
    5. Example data-driven world map with markers

    The code for this tutorial is available in the react-svg-maps-tutorial repo on github.

    Note: This tutorial covers the creation of a simple SVG map. If you need more functionalities, such as zooming, panning and annotations, I put together a library of reusable components called react-simple-maps.

    1. The anatomy of an SVG map

    In order to create a map with react and d3-geo let’s first take a look at what the output of such a map could look like:

    This structure is completely independent from whether you are using react or any other framework/tool to render a map.

    Instead of using d3 to manipulate the DOM and manage the above elements, we can use react. In JSX the above structure virtually stays the same (except for class, which becomes className).

    The only tricky part is generating the d-path for each country. In order to do that you will first need a geo-file (topojson) containing some json describing the country paths. Then you will need a library that can translate such geographical data into coordinates. Topojson-client and d3-geo are ideally suited for these tasks. The former allows you to use topojson files, which are significantly smaller than geojson, and the latter allows you to easily manage geo-projections and translate geo data into a coordinate system. Using d3-geo also allows you to take advantage of the extensive collection of projections created by Mike Bostock.

    2. Dependencies and structure

    In order to create a map with react you will need a basic react project. For my own example, I used the simplest boilerplate possible using next.js so I don’t have to mess with webpack. See the tutorial github repo for more information.

    For the map I will be using d3-geo and topojson-client (assuming you have already installed next, react, and react-dom), so let’s start by installing these libraries:

    The code structure for this example will look like this:

    3. The WorldMap component

    The WorldMap component will render a map based on the world-110m map from the topojson-worldatlas. Since I want to customise the projection and reuse it for markers, I created a separate method that returns an Equal earth projection with some scale and offset customisations. I also take advantage of the SVG viewBox property to prepare the map for variable screen sizes.

    Start by defining geographies as part of the WorldMap component state (line 13). This will be an empty array in the beginning, and the data will be loaded asynchronously, once the component mounts (see useEffect on line 15). The empty array avo >worldData before the map is loaded (see line 32).

    To fetch world-110m.json I use Chrome’s built-in fetch function, but you can use any AJAX library of your choice (e.g. axios, superagent).

    The projection is used to render the d-path of the country paths , as well as the cx and cy property of the marker circles . Since the projection is customised, it makes more sense to store it in a separate variable(see line 8).

    In order to not make all countries the same colour, I use the index of the country within the worldData array to set the opacity of the country path fill. If you have data, you can use the same strategy to create a choropleth map.

    Note: If you are making choropleth maps, always use an equal area projection. For the world map Equal earth and Mollweide are good options. If you do not use an equal area projection, your map will not show correct relationships between countries or areas in different parts of the world and therefore will not be accurate.

    4. Events

    Adding events to your SVG paths works the same way as adding events to any other element in JSX. The below code shows how to add an onClick handler to the country paths.

    The same approach can be used for other events (e.g. mouseEnter, mouseLeave, mouseMove) for countries, but also for markers.

    5. Data example: Most populous cities of the world

    Let’s try to add some data to the mix and output the world’s most populous cities on the world map. The marker size will be determined by the population size of the city.

    Note: I have also added an onClick event to the markers, outputting the currently clicked city to the console (see lines 61 and 65).

    Your map should look like this.

    If you want to add tooltips to your map, you can use the technique outlined above for event handling. To render the actual tooltip, you can use a library like react-tooltip.

    Next steps

    For simple maps, the techniques outlined in this article should be enough to get you started, but once you want to add more complex functionality, such as panning, zooming, etc. it gets a little bit more complicated. Performance is a particularly tricky issue with react SVG maps.

    As mentioned before, I have put together a set of reusable components in the react-simple-maps library, which help make more performant SVG maps with react and d3-geo. The library handles the more complex logic related to resizing, panning, and performance optimisation, so that you can focus on making beautiful and engaging visualisations.

    Inspiration

    If you are interested in reading more about using react and d3 together, check out “Interactive Applications with React and D3” by Elijah Meeks, or “How and why to use d3 with react” by Dan Scanlon.

    If you have any questions or thoughts about the code in this article, please leave a message below. If you found this article helpful, feel free to share and recommend. Happy mapping!

    IP2Location™ World SVG Map

    IP2Location provides a free download of the world SVG map file. It consists of 249 countries as listed in the ISO-3166 standard which is supported by IP2Location. The SVG map can be very useful in many areas, for example, to color the countries with gradient based on certain metrics, to highlight country border and much more. Below we demonstrate how to color the world SVG map with gradient based on the IP address ownership in the year 2020. You may take a look at Internet IP Address 2020 Report for details of ownership report.

    MapSVG — интерактивные карты, планы этажей и адаптивные графики в WordPress

    Описание Демо Купить за $35

    В нашем обзоре вы узнаете, как использовать этот плагин, создавать и настраивать карты, а также как создать интерактивный график с загруженным SVG.

    Возможности Map SVG

    • Управление картой с помощью SVG файлов значит, что у вас нет никаких ограничений, вы всегда можете отредактировать SVG файлы в Adobe Illustrator, убрать или добавить новые области, внося любые изменения
    • MapSVG содержит более 100 гео-откалиброванных карт, которые работают по схожему принципу с Google Maps. Вы можете добавлять маркеры координат с помощью широты/долготы или просто ввести адрес, а MapSVG сам определит координаты. В то же время вы получаете больше свободы действий, поскольку можете редактировать SVG файлы
    • Используйте MapSVG для создания планов этажей
    • MapSVG отлично подходит для создания любых интерактивных векторных изображений (например, интерактивную анатомическую карту тела человека)
    • MapSVG имеет потрясающую панель управления с Live Preview, что превращает создание карты в удовольствие
    • Если вас не пугает JavaScript, то можете добавить пользовательский обработчик событий – onClick, mouseOver, mouseOut

    Использование плагина

    После загрузки и активации плагина вы увидите новый пункт в меню « MapSVG ». Зайдя туда, можете смело начинать создавать свою первую карту. В выпадающем меню вы увидите список всех, имеющихся в плагине карт. Там вы сможете выбрать карту любой страны или всего мира.

    После выбора карты плагин откроет новую страницу, где слева будет отображена выбранная карта, а справа — настройки к ней. Используйте их, чтобы дать название карте и установить её широту и высоту. Ниже вы найдете параметры для установки соотношения широты и высоты, настройки начального положения, включение и выключение адаптивности, настройки прокрутки, изменения масштаба, всплывающих окон и курсора мышки.

    С помощью вкладки « Colors » вы можете настроить цвет вашей карты, изменить фоновый и основной цвет, цвет контура, цвет при наведении курсора и яркость:


    Во вкладке « Regions » можно установить индивидуальные параметры для каждой области на карте. Для каждой области есть своя секция, где можно выбрать цвет, добавить подсказку, всплывающий текст или ссылку:

    С помощью секции « Markers » вы можете добавить пользовательские отметки к карте, при вводе почтового индекса плагин покажет вам адрес, или можете просто ввести координаты долготы или широты. Также вы можете добавлять отметки, при нажатии на которые будут появляться подсказки:

    А в последней вкладке « Javascript » вы можете добавлять собственный пользовательский код Javascript для карты или таких событий как onClick, mouseover, mouseout, beforeload и afterload:

    Когда ваша карта будет готова, скопируйте шорткод, который находится над ней:

    Вставьте его на страницу или в запись и опубликуйте. Карта появится на вашем сайте:

    Пользовательские SVG файлы

    Этот плагин можно использовать не только для создания интерактивных карт. Наиболее важной функцией является возможность загружать собственные SVG файлы, с помощью которых можно добавлять пользовательские файлы. Большинство векторных программ могут экспортировать формат .SVG в Adobe Illustrator, InkScape, Corel Draw, и т.д. Это позволяет создавать пользовательскую графику, план этажей или другие иллюстрации, используя области, отметки и подсказки плагина.

    Для проверки мы взяли бесплатную векторную иллюстрацию , открыли её в иллюстраторе, удалили из неё текст, сохранили как SVG и загрузили в плагин. Плагин автоматически подтянул все области из векторного файла, к которым вы потом можете добавить подсказки:

    Иллюстрацию можно добавить на страницу, как было показано ранее:

    Цена и техническая поддержка

    MapSVG можно приобрести на Codecanyon за $35 . В цену входит также техническая поддержка и обновления в течении 6 месяцев, а за $45.50 – 12 месяцев.

    Техническая поддержка этого плагина предоставляется через Codecanyon, где вы можете написать создателю плагина.

    Заключение

    Это действительно хороший плагин, легкий в использовании, который имеет все нужные вам инструменты для создания интерактивной карты. Он может пригодиться вам в бизнес сайтах для того, чтобы показать местоположение вашего офиса.

    С помощью MapSVG вам будет просто загружать векторные файлы и создавать интересную графику. Например, можно создать интерактивную инфографику, которая будет показывать информацию или статистику, при наведении на неё. Поскольку все файлы в формате SVG, они быстро загружаются в браузер и легко меняют размер под любой экран.

    Не пропустите этот плагин, если ищите способ для управления векторной графикой на сайте.

    Источник: codecanyon.net

    Насколько полезным был этот пост?

    Нажмите на звезду, чтобы оценить этот пост!

    Средний рейтинг: 4.9 / 5. Количество голосов: 19

    World Map Vectors, Photos & PSD

    +21,000 Free graphic resources.

    World map with selected countries in black template

    Abstract polygonal world map with hot points, network connections

    Template for plane tracking design.

    Illustration — map of the world with flags of all countries.

    Abstract earth globe with wireframe sphare

    Map of the world

    International business and trading concept between cities and countries

    Global network connection. world map point

    World earth planet

    Antique paper scroll or parchment with old map

    World map infographic template

    Infographic template with world map

    Isometric tsunami global warming composition

    World religions infographics

    World map blue template

    White world map

    World map dots template

    World map business infographic

    Petroleum industry and oil prices

    World tourism day background with landmarks and transport

    Political map of the world

    Worldmap background design

    Digital world map

    Green world map

    Continental map pointers template

    White world map

    Ancient and vintage world map

    World map background in abstract style

    World map infographic

    World map infographic template with dots design


    World map global network design

    World map business infographic

    World map with conection and blue background

    Gray earth globes

    World map professional infographic

    Global technology network

    Modern world map background

    Flat design toursim day with landmarks

    Dark theme world map infographic

    Business infograhic with world map

    Tourists and landmarks poster

    World map with colourful markers infographic

    Flat travel landing page template

    Pie chart data statistics of world map infographic

    Flat design world map infographic template

    World map with pointer infographic

    Digital world map hologram blue background

    Travel composition with world map and decorative items

    World map background with lines and dots

    Social media

    Get exclusive resources straight to your inbox

    Copyright © 2010-2020 Freepik Company S.L. All rights reserved.

    Registering to this website, you accept our Terms of use and our Privacy policy

    Sign up

    And enjoy the benefits

    Increase your daily download limit

    Get access to exclusive offers and discounts

    Receive a pack of 20 Premium resources for free by subscription to our newsletter

    Already have an account? Sign in

    with your social network

    Sign up with your social network

    with your social network

    Password assistance

    Enter your username or email to recover your password. You will receive an email with instructions. If you are having problems recovering your password contact.

    Hi there!

    Get exclusive Freepik designs, news and promotions from our newsletter.

    Subscribe and get 20 Premium vectors

    Yes I’m in No, continue without getting the pack

    We will protect your personal information. More info

    Report

    Notification of Copyright Breach

    If you are the copyright holder or agent in charge of this and believe that any content on the Freepik site inflicts copyright of your work, you may submit a notification to the DMCA to notify of resources which may pose an infringement of the relevant licenses

    Report download problem

    Select the kind of error you found

    Congrats! You’re now a Premium member at Freepik.

    You may now use all our resources without attribution and you’ll also be able to download the resources marked with the Premium badge.

    Our License Allows you to use the content

    • For commercial and personal projects
    • On digital or printed media
    • For an unlimited number of times, continuously
    • From anywhere in the world
    • With modifications or to create derivative works

    * This text is just a summary and doesn’t have a contractual liability. For more information, read our Terms of use before using the content.

    Svg worldmap example

    Thanks for this nice article.


    I am new to this html5 and jquery domain and facing some issue with the sample application.
    I created ASP.NET MVC 4 web application using VS 2010 and downloaded the source code from this page and added it into my web application.
    I tried to run the application and got «Microsoft JScript runtime error: Object doesn’t support property or method ‘svg'» exception.

    Can you please help me?

    Thanks,
    DIP. Sign In· View Thread

    MuitObrigado

    Joan Blanq 8-Feb-13 9:51
    He llegado aqui navegando desde los mapas que muestran «how big is africa», con las siluetas de varios paises superpuestas.

    Me encanta svg, pero lo unico que he hecho fué el puzzle de los pentominos ( pentominos, LIFE y hangman son los programas que siguen a «Hello World!» cuando aprendo un lenguaje.

    La aplicación que estoy pensando era un canvas donde arrastrar siluetas de países ( en proyección cenital sobre el baricentro ). Otra app más antigua era un globo terrestre transparente en proyección paralela, para obtener los sitios con territorio en las antípodas.

    Mi plan era crear una estructura que almacenase sólo las fronteras, para reducir a la mitad el tamaño de los datos. No sé si se puede hacer en tiempo real, en el cliente.

    In any case, thank you for saving us from reintenting the wheel . And for the discovery of this site. Now, it’s only time.

    ian sexton 1-Jan-13 9:30
    I know that this must have been very time consuming, so I thank you very much for your efforts. You just replaced Vitor Belfort as my favorite Brazilian.

    Thank you.

    Sign In· View Thread
    Great !!

    Member 9427491 13-Sep-12 3:08
    This is great stuff!
    Great work Marcelo!
    I’ve been working a lot with maps and create interactive maps, and this stuff might really help me. I’ve used mostly google geochart api, but it has some limitations. I even made a WordPress plugin to make it easier to use: http://cmoreira.net/interactive-world-maps-demo/
    But next time, i’ll try to explore this code.
    Sign In· View Thread
    My vote of 5 Raj20204 29-Jul-12 4:39
    Excellent source of information, please keep up the good work.
    Sign In· View Thread
    Great Job Member 1965191 18-Mar-12 17:00
    Pardon my language, but this s**t is really good. Really appreciate the efforts to come up with the map in js format.
    Sign In· View Thread
    Re: Great Job Marcelo Ricardo de Oliveira 20-Mar-12 5:34

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    Akram El Assas 10-Mar-12 1:14
    Good article.
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 20-Mar-12 5:33

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    Paulo Bueno 11-Dec-11 19:51
    clearly explained and easy to follow. Great relevance.
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 1-Mar-12 16:45

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    @dri@n 23-Nov-11 3:10
    Would be nice if you can pass-in in «enabled» or «disabled» country list. so e.g. showing europe with only maps enabled like germany, austria and italy.
    Sign In· View Thread
    Re: Works nice. Future request. Marcelo Ricardo de Oliveira 1-Mar-12 16:45

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    Seçkin 24-Oct-11 20:08
    look at sweden!! good job!
    Sign In· View Thread
    Re: sweden Marcelo Ricardo de Oliveira 1-Mar-12 16:44

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    jawed.ace 20-Oct-11 3:06
    Fantastic work
    thanks for this article..
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 1-Mar-12 16:44

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Windows Phone Labyrinth here in The Code Project.

    ak_1989 18-Oct-11 2:52
    Awesome.
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 18-Oct-11 5:38

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Scattered Polaroids here in The Code Project.

    Abhijit J ana 14-Oct-11 4:11
    Nice work again Marcelo !!
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 15-Oct-11 5:16

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Scattered Polaroids here in The Code Project.

    AditSheth 12-Oct-11 19:16
    My Vote 5
    Sign In· View Thread
    Re: Vote 5 Marcelo Ricardo de Oliveira 13-Oct-11 13:08

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Scattered Polaroids here in The Code Project.

    Ahsan Murshed 11-Oct-11 23:44
    Very nice article. excellent
    Sign In· View Thread
    Re: My vote of 5 Marcelo Ricardo de Oliveira 12-Oct-11 15:26

    There’s no free lunch. Let’s wait for the dinner.

    Take a look at Scattered Polaroids here in The Code Project.

    Sign In· View Thread
    Last Visit: 12-Nov-19 4:29 Last Update: 12-Nov-19 4:30 Refresh 1 23 Next »

    General News Suggestion Question Bug Answer Joke Praise Rant Admin

    Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

    One more step

    Please complete the security check to access codepen.io

    Why do I have to complete a CAPTCHA?

    Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

    What can I do to prevent this in the future?

    If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

    If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

    Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

    Cloudflare Ray ID: 534933a9d9109093 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

    Илон Маск рекомендует:  border-right-color в CSS
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL