Artikel itu ?

Anda yang suka posting di blog atau ingin mulai  menulis di blog dan anda ingin membuat sebuah artikel yang menarik lalu ramai dikunjungi banyak visitor. Ya, ada baiknya anda mengetahui apa itu artikel terlebih dahulu.

“first, you must know what is article”

Artikel atau tulisan karangan bebas yang tidak terikat oleh pola-pola tertentu, yang biasa digunakan dalam media online atau offline. Artikel juga bisa di sebut karya ilmiah populer karena bahasanya bisa diserap oleh semua kalangan.

Dalam kaidah temporer, artikel adalah karya tulis dan hakikatnya karya tulis adalah menyodorkan argumentasi.

Lalu bagaimana cara membuat artikel yang baik dan benar. jika anda ingin membuat sebuah artikel yang baik dan benar, maka harus memenuhi kriteria-kriteria  seperti berikut ini.

1. Menggunakan tata bahasa dan gaya bahasa yang masuk akal;
2. Analitis;
3. Kritis;
4. Disampaikan dengan cara runut baik itu induktif atau deduktif;
5. Disertai dengan data dan fakta, baik dari penelitian atau pengamatan linkungan;

Kurang lebih seperti itu pada awal kali ini mengenai artikel. semoga bermanfaat, wassalam.

Ustad saya sholat bolong-bolong tapi rezeki lancar tuh …

Alkisah, disuatu hari ada seorang pemuda bernama bolono dan pa ustadz sedang bercakap-cakap.

Bolono : “Ustadz, sholat saya bolong-bolong tapi alhamdulilah rezeki saya lancar aja tuh”;
Ustadz : “Ente pernah ngasih ke tukang parkir?”;
Bolono : “pernah, kenapa tadz?”;
Ustadz : “Ente ngasih karena sayang, cinta?”;
Bolono : “ya engga lah tadz, yang bener aje hehehe..”;
Ustadz : “nah, skarang ente pikir apa Allah kasih rezeki karena Alloh cinta ???”;
Bolono : “(nelen ludah)”;

Sekian, semoga bermanfaat, wassalam.

Leaflet Tambah dan Hapus Marker on Click

Posting sekarang adalah lanjutan mengenai leaflet. Bahasannya adalah bagaimana menambah dan menghapus tanda marker dalam peta.

window.onload=function(){

// We’ll add a OSM tile layer to our map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([25.92, 79.84], 5).addLayer(osm);

// attaching function on map click
map.on('click', onMapClick);

// Script for adding marker on map click
function onMapClick(e) {
var geojsonFeature = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [e.latlng.lat, e.latlng.lng]
}
}

var marker;

L.geoJson(geojsonFeature, {
pointToLayer: function(feature, latlng){
marker = L.marker(e.latlng, {
title: "Resource Location",
alt: "Resource Location",
riseOnHover: true,
draggable: true,
}).bindPopup("<[remove this]input class="marker-delete-button" type="button" value="Delete this marker" />");
marker.on("popupopen", onPopupOpen);
return marker;
}
}).addTo(map);
}

// Function to handle delete as well as other events on marker popup open
function onPopupOpen() {

var tempMarker = this;

//var tempMarkerGeoJSON = this.toGeoJSON();
//var lID = tempMarker._leaflet_id; // Getting Leaflet ID of this marker

// To remove marker on click of delete
$(".marker-delete-button:visible").click(function () {
map.removeLayer(tempMarker);
});
}

// Getting all the markers
function getAllMarkers() {

var allMarkersObjArray = [];//new Array();
var allMarkersGeoJsonArray = [];//new Array();

$.each(map._layers, function (ml) {
//console.log(map._layers)
if (map._layers[ml].feature) {

allMarkersObjArray.push(this)
allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
}
})

console.log(allMarkersObjArray);
alert("total Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n Also see your console for object view of this array" );
}

$(".get-markers").on("click", getAllMarkers);

}

output yang dihasilkan menjadi seperti berikut.

Semoga bermanfaat, wassalam.

Leaflet BindPopup

Bind pupup merupakan pupup informasi tambahan dalam sebuah marker leaflet. Informasi di sesuaikan dengan kebutuhan marker, apabila tidak mencukupi hanya dengan marker saja, seperti catatan tambahan.  Contoh sederhana seperti pada gambar.

kode sederhananya seperti berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

L.marker([0.5769167874644966, 123.01858018012717])
.addTo(map)
.bindPopup('Endang
Lokasi rumah disini.')
.openPopup();;

}
window.onload = main;

Semogabermanfaat, wassalam.

Leaflet Polygon

Bagaimana cara membuat polygon dengan menggunakan leaflet. (Leaflet adalah media interaktif maps). Jadi dalam map ada beberapa garis-garis yang menutupi area tertentu. Polygon di buat dari titik-titik yang terhubung. Jadi kuncinya adalah titik koordinat dari latitude longitude nya.

window.onload = function(){
// We’ll add a OSM tile layer to our map
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});

// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([25.92, 79.84], 5).addLayer(osm);

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41.236511201246216, -105.27099609375],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());
}

Output tampilan yang dihasilkan seperti berikut.

Semoga bermanfaat, wassalam.

Leaflet Custom Icon Marker

Icon marker custom, secara default icon dalam leaflet penandanya warnanya biru dengan bentuk tertentu. Apabila ingin merubah icon marker sesuai dengan ke inginan maka kita perlu menambahkan kode tambahan. Contoh kode untuk custom icon marker kurang lebih sederhananya berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

var myIcon = L.icon({
iconUrl: 'house-icon.png',
iconSize: [40, 45], // size of the icon
});
L.marker([0.5769167874644966, 123.01858018012717], {icon: myIcon}).addTo(map);

}
window.onload = main;

Hasil output adalah sebagai berikut.

Semoga bermanfaat, wassalam.

 

Leaflet Routing

Routing berfungsi untuk memperilhatkan jalur yang akan dilalui oleh dua titik, awal dan tujuan. Untuk membuat routing, hal pertama yang dilakukan yakni mengincludekan library tambahan selain file library utama leaflet. seperti pada gambar kode berikut.

kemudian pada bagian body (setelah div dengan nama map) masukan kode berikut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

var control = L.Routing.control({
waypoints: [
L.latLng(57.74, 11.94),
L.latLng(57.6792, 11.949)
],
// routeWhileDragging: true
}).addTo(map);
control.hide();

}
window.onload = main;

Hasil akan muncul seperti pada gambar dibawah.

semoga bermanfaat. wassalam.

Leaflet get latitude longitude

Bagaimana cara mengetahui letak titik koordinat Latitude dan longitude peta pada leaflet, seperti pada gambar dibawah. jadi ketika di klik pada peta akan muncul alert titik koordinat.

Berikut contoh kode sederhana untuk mengambil titik koordinat tersebut.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

// get coordinate
map.on('click',
function(e){
var coord = e.latlng.toString().split(',');
var lat = coord[0].split('(');
var lng = coord[1].split(')');
alert("You clicked the map at latitude: " + lat[1] + " and longitude:" + lng[0]);
});
}
window.onload = main;

Semoga bermanfaat. wassalam.

Leaflet Multiple Marker

Posting sebelumnya bagaimana membuat marker dengan contoh satu marker atau penanda. Selanjutnya bagaimana cara membuat multiple marker di leaflet. berikut contoh kodenya.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

// add multiple marker
L.marker([0.5769167874644966, 123.01858018012717]).addTo(map);
L.marker([0.57415, 123.02233]).addTo(map);
}
window.onload = main;

Hasil display dari kode diatas adalah dibawah.

Semoga bermanfaat, wassalam.

Leaflet Marker

Marker atau penanda lokasi dalam peta sudah menjadi bagian kebutuhan pemetaan. seperti halnya google map, yang memiliki marker leaflet juga ada, perbandingan google map karena yang populer saat ini.

Bagaimana cara membuat marker dalam leaflet, berikut contoh kodenya.

function main() {

var options = {
center: [0.5769167874644966, 123.01858018012717],
zoom: 15
}

var map = L.map('map', options);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
{attribution: 'CARTO'})
.addTo(map);

L.marker([0.5769167874644966, 123.01858018012717]).addTo(map);
}

window.onload = main;

Hasil dari kode diatas adalah seperti berikut ini.

Semoga bermanfaat, wassalam.