### WordPress Plugin Installation Source: https://simplemaps.com/docs/4.1/wordpress-install Instructions for installing and activating the Simplemaps WordPress plugin. This method involves searching for the plugin in the WordPress dashboard, installing it, activating it, and then uploading map files through the plugin's settings. Finally, a shortcode is used to embed the map into posts or pages. ```WordPress Shortcode [simplemaps] ``` -------------------------------- ### Manual Shopify Installation HTML Snippet Source: https://simplemaps.com/docs/3.6/shopify-install This HTML snippet is used for manually installing Simplemaps on a Shopify store. It requires linking to the 'mapdata.js' and 'worldmap.js' files (or equivalent for other maps) and then rendering the map within a div with the id 'simplemaps'. The user must replace the example CDN URLs with the actual URLs of their uploaded files. ```html

``` -------------------------------- ### Embed Map Scripts for Manual Shopify Installation Source: https://simplemaps.com/docs/3.5/shopify-install This JavaScript snippet is used for manual installation of Simplemaps.com maps in Shopify. It requires replacing placeholder URLs with the actual URLs of the uploaded mapdata.js and worldmap.js files. The script then renders the map within a designated div. ```javascript

``` -------------------------------- ### Install SQLite on Ubuntu Source: https://simplemaps.com/docs/3.8/connect-map-to-database Command to install the SQLite database management system on Ubuntu. SQLite is a lightweight database that stores data in a single file. ```bash sudo apt-get install sqlite3 ``` -------------------------------- ### Vue.js 2 Installation: Include Scripts Source: https://simplemaps.com/docs/vue-install Include the Vue.js library and the SimpleMaps JavaScript files in the `` of your HTML document. Ensure the paths to the map data and map JavaScript files are correct for your setup. ```html ``` -------------------------------- ### Vue.js 3 Map Component Setup and Dynamic Update Source: https://simplemaps.com/docs/vue3-install This JavaScript code demonstrates how to set up a Vue.js 3 component for integrating a map. It includes loading the map, managing its state, and dynamically changing map properties like state color upon user interaction. ```javascript const app = Vue.createApp({el: '#app', }) app.component('map-component', { data() { return { map_red: false } }, template: '

``` ```javascript const app = Vue.createApp({el: '#app', }) app.component('map-component', { data() { return { map_red: false } }, template: '

', mounted: function(){ simplemaps_usmap.load(); }, computed: { simplemaps_usmap: function () {return window.simplemaps_usmap;} }, methods: { make_red: function(){ this.map_red = true; simplemaps_usmap.mapdata.main_settings.state_color = 'red'; simplemaps_usmap.refresh(); } }) app.mount("#components-demo"); ``` -------------------------------- ### Embed Map Files in HTML Header Source: https://simplemaps.com/docs/3.6/typical-install This snippet demonstrates how to include the necessary map data and JavaScript files in the header of your HTML page. Ensure you replace the example URLs with the actual paths to your uploaded files. This step is crucial for the map to load correctly. ```html ``` -------------------------------- ### Embed SimpleMaps using HTML Script Tags Source: https://simplemaps.com/docs/3.5/typical-install This snippet shows how to include the necessary JavaScript files for your SimpleMaps installation. You need to replace the placeholder URLs with the actual paths to where you've uploaded your mapdata.js and worldmap.js files on your server. This is a prerequisite for the map to function correctly. ```html ``` -------------------------------- ### Vue.js 2 Installation: Initialize Vue and Map Component Source: https://simplemaps.com/docs/vue-install Initialize the Vue instance and define a custom map component. The component loads the map on 'mounted', uses 'computed' to access global map variables, and provides methods for dynamic map manipulation, like changing state color. ```javascript new Vue({ el: '#app', data: {map_visible: false,} }) Vue.component('map-component', { template: '

', mounted: function(){ simplemaps_usmap.load(); }, computed: { simplemaps_usmap: function () {return window.simplemaps_usmap;} }, methods: { make_red: function(){ simplemaps_usmap.mapdata.main_settings.state_color = 'red'; simplemaps_usmap.refresh(); } } }) ``` -------------------------------- ### Embed React CDN Libraries Source: https://simplemaps.com/docs/4.1/react-install Includes the necessary React and ReactDOM development libraries from a CDN to a webpage. This is a prerequisite for using React components. ```html ``` -------------------------------- ### Create SQLite Database and Table Source: https://simplemaps.com/docs/3.8/connect-map-to-database Creates an SQLite database file named 'example.db' and a table 'cities' with columns for city name, latitude, and longitude. It also inserts a sample row of data. ```bash sqlite3 dynamic/example.db 'CREATE TABLE cities (city string, lat float, lng float); INSERT INTO cities (city, lat, lng) values ("Cincinnati", 39.107, -84.504);' ``` -------------------------------- ### Embed Map Div for Shopify App Installation Source: https://simplemaps.com/docs/3.5/shopify-install This HTML snippet is used to create a container element where the map will be rendered after installing the Simplemaps Shopify App. It should be pasted into the HTML view of a Shopify page. ```html

``` -------------------------------- ### Loading Application with RequireJS Source: https://simplemaps.com/docs/3.5/requirejs-install This JavaScript snippet demonstrates how to initiate the RequireJS application. It loads the 'app/main.js' file, which contains the core application logic and further module dependencies. ```javascript requirejs(['app/main']); ``` -------------------------------- ### Joomla Module Shortcode for Map Integration Source: https://simplemaps.com/docs/3.8/joomla-install This shortcode is generated by Joomla when a custom module containing the map embedding code is added to an article. It allows Joomla to dynamically load and display the map within the content. ```plaintext {loadmodule mod_custom,Map} ``` -------------------------------- ### HTML Script Tag for RequireJS Initialization Source: https://simplemaps.com/docs/3.5/requirejs-install This HTML snippet shows the script tag to be placed within the `` of your webpage. It configures RequireJS to use 'app' as the main entry point and specifies the location of the RequireJS library. ```html ``` -------------------------------- ### Include Map Dependencies and Placeholder in HTML Source: https://simplemaps.com/docs/4.4/connect-map-to-database HTML snippet to include necessary JavaScript files (jQuery, mapdata, usmap, update_map) and a 'div' element with the ID 'map' where the interactive map will be rendered. ```html

``` -------------------------------- ### Vue.js 3 Map Component Implementation Source: https://simplemaps.com/docs/4.4/vue3-install This JavaScript code implements a Vue.js 3 component for displaying and interacting with a SimpleMap. It handles map loading, dynamic color changes, and uses computed properties to access global map objects. ```javascript const app = Vue.createApp({el: '#app', }) app.component('map-component', { data() { return { map_red: false } }, template: '

``` -------------------------------- ### Get XY Coordinates Source: https://simplemaps.com/docs/4.1/api Gets the x and y coordinates of a clicked point on the map, useful for placing labels. ```APIDOC ## Get XY Coordinates ### Description Allows you to click on the map to get any point's x and y coordinates. Useful for labels. ### Method JavaScript Function Call ### Endpoint N/A (Client-side JavaScript) ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript var coordinates = simplemaps_worldmap.get_xy(); console.log('X: ' + coordinates.x + ', Y: ' + coordinates.y); ``` ### Response #### Success Response (Object) Returns an object containing the x and y coordinates of the clicked point. - **x** (number) - The x-coordinate. - **y** (number) - The y-coordinate. #### Response Example ```json { "x": 123, "y": 456 } ``` ``` -------------------------------- ### Popup and Instance Management API Source: https://simplemaps.com/docs/4.4/api Covers triggering popups programmatically and managing multiple map instances. ```APIDOC ## Popup and Instance Management API ### Description This API allows for programmatically controlling popups and managing individual map instances. ### Popup Functions * `simplemaps_worldmap.popup(type, id)` * Opens a popup or tooltip programmatically. * `type`: The type of element to show the popup for. Can be 'location', 'state', or 'region'. * `id`: The ID of the element. * **Example**: ```javascript simplemaps_worldmap.popup('location', '0'); ``` * `simplemaps_worldmap.popup_hide()` * Hides any currently open popup. ### Map Instance Functions * `simplemaps_worldmap.create()` * Creates a new map instance using the global `simplemaps_worldmap_mapdata` object. * **Example**: ```javascript var map1 = simplemaps_worldmap.create(); ``` * `simplemaps_worldmap.copy()` * Copies an existing map instance. * **Example**: ```javascript var map2 = map1.copy(); ``` ### Map Instance Properties * `map_instance.mapdata` * The map data object bound to a specific map instance. Modifications here affect only that instance. * **Example**: ```javascript map1.mapdata.main_settings.state_color = 'red'; ``` * `map_instance.mapinfo` * Information about the map instance. * **Example**: ```javascript map1.mapinfo.initial_view = 150; ``` ``` -------------------------------- ### Export SQLite Data to JSON using Python Source: https://simplemaps.com/docs/3.8/connect-map-to-database Python script to connect to an SQLite database, query all data from the 'cities' table, and export it as a JSON file named 'example.json'. Requires 'sqlite3' and 'json' libraries. ```python import sqlite3 import json #Connect to database and select all cities conn = sqlite3.connect('dynamic/example.db') cur = conn.cursor() cur.execute("SELECT * FROM cities") rows = cur.fetchall() #Convert the data to JSON format and save it as a JSON file with open('dynamic/example.json', 'w') as jsonfile: json_text=json.dumps(rows, indent=4) jsonfile.write(json_text) ``` -------------------------------- ### Get X/Y Coordinates from SimpleMaps Australia Map (JavaScript) Source: https://simplemaps.com/docs/4.4/get-xy This snippet explains how to get x and y coordinates from a SimpleMaps Australia map. By running `simplemaps_australiamap.get_xy();` in the developer console and clicking on the map, users can obtain coordinates for custom map features. ```javascript simplemaps_australiamap.get_xy(); ``` -------------------------------- ### HTML Structure for Map Integration Source: https://simplemaps.com/docs/3.8/connect-map-to-database HTML snippet to include necessary JavaScript files (jQuery, mapdata.js, usmap.js, update_map.js) and a div element where the map will be rendered. ```html

``` -------------------------------- ### SimpleMaps Zoom Examples Source: https://simplemaps.com/docs/4.3/api Illustrates practical usage of the zoom functions within the SimpleMaps JavaScript API. Examples include zooming to a state by ID, zooming to a region by ID (with an optional callback for completion), and zooming to a specific location with a defined zoom percentage. ```javascript simplemaps_worldmap.state_zoom("ID"); //Zoom to state by id simplemaps_worldmap.region_zoom("0"); //Zoom to region by id simplemaps_worldmap.region_zoom("0", function(){ alert("Zoom done")} ); //Zoom and callback when complete simplemaps_worldmap.location_zoom('0', '4'); ```