[SOLVED] Leaflet js : Connection Error

Questions
1

Hello,

Am trying to use leaflet js with framework7 v3.

When I try load the map in my template I get the following errors.

Geolocation error: User denied geolocation prompt.

A Geolocation request can only be fulfilled in a secure context.

This is my code

<script>
	return {
			data: function () {
				return {
					data: [],
			}
		},

		on: {
			pageInit: function(e, page) {

				var self = this;
				var app = self.$app
												
				var map = L.map('map').setView([-1.287778, 36.826464], 13);
				
				L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
					attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				}).addTo(map);
				
				map.locate({setView: true, maxZoom: 13});

				function onLocationFound(e) {
					var radius = e.accuracy / 2;
						   L.circle(e.latlng, radius).addTo(map); //My Circle
						  //more logic
				}

				map.on('locationfound', onLocationFound);
				map.on('locationerror', onLocationError);

				function onLocationError(e) {
					console.log(e.message);
				}
				
			},
		}
	}
</script>

What am I missing?

2

First link in Google: https://stackoverflow.com/questions/49896961/a-geolocation-request-can-only-be-fulfilled-in-a-secure-context ?

3

Am doing my development on local machine using the firefox browser.

Any way to circumnavigate that issue?

4

What server do you use? Node/Gulp/PHP, they are all have extensions to run local server over https

5

I use php. What extension do I use?

6

Ok, now it depends on what server package do you use? Just check its documentation. For example, if it was Valet, it has such option https://laravel.com/docs/5.7/valet#serving-sites

1 Like
7

I have done the SSL set up and eliminated all errors on the console. When I now try load no map it does not render.

My code on the tempate is similar to this. Do I need specific html tags/css to have the map display correctly?

<style>

	#map { 
		height: 100% 
	}

</style>
	
<template>

	<div class="page">
	
	  <div class="navbar">
		<div class="navbar-inner sliding">
		  <div class="left">
			<a href="#" class="link back">
			  <i class="icon icon-back"></i>
			  <span class="ios-only">Back</span>
			</a>
		  </div>
		  <div class="title">Geo Visualization</div>
		</div>
	  </div>
	  <div class="toolbar tabbar">
		<div class="toolbar-inner">
		  <a href="#tab-1" class="tab-link tab-link-active">Current Location</a>
		  <a href="#tab-2" class="tab-link">Geo-fencing</a>
		  <a href="#tab-3" class="tab-link">Location History</a>
		</div>
	  </div>
	<div class="tabs-swipeable-wrap">
		<div class="tabs">
		
			<div id="tab-1" class="page-content tab tab-active">
				<div class="block">
				
					<p class="row">
						<button class="col button button-raised">Refresh</button>
					</p>
					<p class="row">
						<div id="map"></div>
					</p>
					
				</div>
			</div>
			
			<div id="tab-2" class="page-content tab">
				<div class="block">
				
					<p class="row">
						<button class="col button button-raised">Polygon</button>
						<button class="col button button-raised">Circle</button>
					</p>
					<p>
					
					</p>
					
				</div>
			</div>
		
			<div id="tab-3" class="page-content tab">
				<div class="block">

					<p class="row">
						<button class="col button button-raised">Refresh</button>
					</p>
					<p>

					</p>

				</div>
			</div>
			
		</div>
		
	  </div>
	
	</div>

</template>

Assistance will be greatly appreciated!

8

This doesn’t seem correct. Set correct height of map element

1 Like
9

This did the trick! Awesome.

#map { height: 300px; }