johan--/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Just a minimal CARTO.js example with the defalut Leaflet Control Geocoder.
Simply add the JS and CSS imports
<!-- Geocoder-->
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
And then add the control to your map
// Geocoder
L.Control.geocoder().addTo(map);
By default it uses OpenStreetMap data (same as Mapbox) but the plugin provides many other geocoders ready to use, some of them needing from you to provide credentials for the specific geocoding service provider.

  
## index.html
<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .leaflet-popup-content ul {
            padding-left: 1.2em;
        }
    </style>

    <!-- Include Carto.js -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script>
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">

    <!-- Geocoder-->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

</head>

<body>
    <div id="map"></div>
    <div id="searchbox">
        <script>
            let layer;
            let input;
            let map;

            function main() {
                let map = L.map('map', {
                    zoomControl: false,
                    center: [41.390205, 2.154007],
                    zoom: 4
                });

                L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                }).addTo(map);

                // define client
                const client = new carto.Client({
                    apiKey: 'default_public',
                    username: 'oboix'
                });

                const source = new carto.source.SQL(`
                    SELECT * FROM world_table_2
                `);
                // define CartoCSS code to style data on map
                const style = new carto.style.CartoCSS(
                    `
                    #world_table_2 {
                        polygon-fill: #3E7BB6;
                        polygon-opacity: 0.7;
                        line-color: #FFF;
                        line-width: 0.5;
                        line-opacity: 1;}
                `
                );
                // create CARTO layer from source and style variables
                const layer = new carto.layer.Layer(source, style, {
                    featureClickColumns: ['name', 'iso3', 'area', 'pop2005']
                });

                // add CARTO layer to the client
                client.addLayer(layer);

                // get tile from client and add them to the map object
                client.getLeafletLayer().addTo(map);

                // Geocoder
                L.Control.geocoder().addTo(map);

                // Interactivity
                const popup = L.popup({
                    autoPan: false
                });

                layer.on('featureClicked', function (featureEvent) {
                    const data = featureEvent.data;
                    const content =
                        `
                    <h3>${data.name}</h3>
                    <ul>
                    <li><strong>Area</strong>:${data.area}</li>
                    <li><strong>ISO3</strong>:${data.iso3}</li>
                    <li><strong>Population (2005)</strong>:${data.pop2005}</li>
                    </ul>
                    `
                    popup.setContent(content);
                    popup.setLatLng(featureEvent.latLng);
                    if (!popup.isOpen()) {
                        popup.openOn(map);
                    }
                });
            }
            window.onload = main;
        </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>

	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style>
	html,
	body,
	#map {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}

	.leaflet-popup-content ul {
	padding-left: 1.2em;
	}
	</style>

	<!-- Include Carto.js -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script>
	<!-- Include Leaflet -->
	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
	<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">

	<!-- Geocoder-->
	<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
	<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

	</head>

	<body>
	<div id="map"></div>
	<div id="searchbox">
	<script>
	let layer;
	let input;
	let map;

	function main() {
	let map = L.map('map', {
	zoomControl: false,
	center: [41.390205, 2.154007],
	zoom: 4
	});

	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	// define client
	const client = new carto.Client({
	apiKey: 'default_public',
	username: 'oboix'
	});

	const source = new carto.source.SQL(`
	SELECT * FROM world_table_2
	`);
	// define CartoCSS code to style data on map
	const style = new carto.style.CartoCSS(
	`
	#world_table_2 {
	polygon-fill: #3E7BB6;
	polygon-opacity: 0.7;
	line-color: #FFF;
	line-width: 0.5;
	line-opacity: 1;}
	`
	);
	// create CARTO layer from source and style variables
	const layer = new carto.layer.Layer(source, style, {
	featureClickColumns: ['name', 'iso3', 'area', 'pop2005']
	});

	// add CARTO layer to the client
	client.addLayer(layer);

	// get tile from client and add them to the map object
	client.getLeafletLayer().addTo(map);

	// Geocoder
	L.Control.geocoder().addTo(map);

	// Interactivity
	const popup = L.popup({
	autoPan: false
	});

	layer.on('featureClicked', function (featureEvent) {
	const data = featureEvent.data;
	const content =
	`
	<h3>${data.name}</h3>
	<ul>
	<li><strong>Area</strong>:${data.area}</li>
	<li><strong>ISO3</strong>:${data.iso3}</li>
	<li><strong>Population (2005)</strong>:${data.pop2005}</li>
	</ul>
	`
	popup.setContent(content);
	popup.setLatLng(featureEvent.latLng);
	if (!popup.isOpen()) {
	popup.openOn(map);
	}
	});
	}
	window.onload = main;
	</script>
	</body>

	</html>