atmist / snazzy-info-window Goto Github PK
View Code? Open in Web Editor NEWCustomizable info windows using the Google Maps JavaScript API.
License: MIT License
Customizable info windows using the Google Maps JavaScript API.
License: MIT License
Have integrated the required CSS and the JS files into my site as detailed in the "Quick start" section of the readme, however receive the following:
Uncaught ReferenceError: google is not defined
Uncaught ReferenceError: SnazzyInfoWindow is not defined
Any ideas how to resolve?
We have maxWidth and maxHeight. It would be really helpful if we could set the height and width as well. Dealing with the CSS is a huge headache so I rather do it this way.
Hi,
Is it possible to set behaviour as stated in the title? So if i click on a marker to open a snazzy info window can it close the current open window (if open), the idea being that only one window is open at any one time.
Thanks
Hey! Faced with an issue:
For example, I want info window to be opened always, but with a specific styling classes. Like, "open" and when clicked on it comes to "active" with no need for info.close(). The "open" has width/height 50px, and when its "active" - 200/200px. So here comes the trouble. Dynamic change of size not actually works fine. And I'm experienced overlapping off the screen. So have to set edgeOffset to "200", just to be sure it's not overlapping on the top. But the marker pushes down to those 200px when the info window doesnt have "active" class. Any ideas, how to handle it?
Using this as an ES6 module (with vue.js + webpack), I cannot import the module , because at the time of import, the google
global var is not yet created. Instead, I get a ReferenceError
. Is there a way around this?
Sent an email but not sure if it was received, no response received yet, however it appears all the maps on the entire website are broken which is also breaking all plugins and embeds. Can you please fix it? Also do you take Bitcoin donations? I'd love to donate as this is a great service. Thanks.
After building a map, and saving, the only export options showing is the iframe code and not the java version?
Related to agm-snazzy-info-window, with map api v 3.32 and "@agm/snazzy-info-window": "^1.0.0-beta.3" maxWidth of window can not be set like before:
<agm-snazzy-info-window maxWidth="1000" [maxHeight]="1000" [closeWhenOthersOpen]="true">
Any suggestions?
I created a map with 5 markers, which i want them to open different complex styles nazzy windows.
The problem is that the only window that open/closes correctly is always the last one, i guess its because its the one referred last. Any suggestions on how to implement it? This is the code from "scripts.js"
// Create the map
var map = new google.maps.Map($('.map-canvas')[0], {
zoom: 14,
styles: mapStyle,
scrollwheel: false,
center: new google.maps.LatLng(-33.88322, 151.22009),
//{'featureType': 'poi','elementType': 'all', 'stylers': [{'visibility': 'off'}]},//mapStyle,
});
// Add a custom marker
var markerIcon = {
path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
fillColor: '#6FC',
fillOpacity: 0.95,
scale: 3,
strokeColor: '#fff',
strokeWeight: 2,
anchor: new google.maps.Point(12, 24)
};
/*var marker = new google.maps.Marker({
map: map,
icon: 'logo_sbc_CUBSM.fw.png',
position: new google.maps.LatLng(-33.87073, 151.2104)
});*/
var marker_a = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.87355, 151.20697)
});
var marker_b = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.86578, 151.20616)
});
var marker1 = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.88706, 151.17122)
});
var marker2 = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.90433, 151.19577)
});
var concrete_cafe = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.88547, 151.20172)
});
var preach_cafe = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.89129, 151.27348)
});
var baby_coffee = new google.maps.Marker({
map: map,
icon: 'sbc_icon2sm.png',
position: new google.maps.LatLng(-33.9005, 151.20633)
});
// Set up handle bars
var template = Handlebars.compile($('#marker-content-template').html());
// Set up a close delay for CSS animations
var info = null;
var closeDelayed = false;
var closeDelayHandler = function() {
$(info.getWrapper()).removeClass('active');
setTimeout(function() {
closeDelayed = true;
info.close();
}, 300);
};
//Info Window to the marker
info = new SnazzyInfoWindow({
//if(marker==marker2)
marker: marker2,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Nelson Nest',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'nelsonnest.png',
body: '<p><i>The secret ingredient is always love and you will be sure to find it</p></i> '+
'echo $(this.getWrapper())'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: cafe_06,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: '0.6 CAFE',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'cafe06.png',
body: '<p><i>Rolling into the weekend with a magic matcha brunch</p></i> '+
'<p>Alexandria best coffee and brunch</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>7am - 4pm Weekdays</p>'+
'<p>9am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
//------------------------------
info = new SnazzyInfoWindow({
marker: concrete_cafe,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Concrete Jungle Cafe',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'concrete.png',
body: '<p><i>A serene oasis from the hustle of Sydney busy streets</p></i> '+
'<p>Refuel your energy at Concrete Jungle</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: preach_cafe,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Preach Cafe',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'preach.png',
body: '<p><i>A great place for brunch in Bondi beach</p></i> '+
'<p>Enjoy your bowls by the sea</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
info = new SnazzyInfoWindow({
marker: baby_coffee,
wrapperClass: 'custom-window',
offset: {
top: '-35px'
},
edgeOffset: {
top: 50,
right: 60,
bottom: 50
},
border: false,
closeButtonMarkup: '<button type="button" class="custom-close">×</button>',
content: template({
title: 'Baby Coffee CO',
//subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
bgImg: 'baby.png',
body: '<p><i>Pink Panther @babycoffeeco, Let me paint your world .</p></i>'+
'<p>Enjoy your bowls by the sea</p>'+
'<p><mark><ins>Open</ins>:</p></mark>'+
'<p>6am - 3pm Weekdays</p>'+
'<p>7am - 3pm Weekends</p>'
}),
callbacks: {
open: function() {
$(this.getWrapper()).addClass('open');
},
afterOpen: function() {
var wrapper = $(this.getWrapper());
wrapper.addClass('active');
wrapper.find('.custom-close').on('click', closeDelayHandler);
},
beforeClose: function() {
if (!closeDelayed) {
closeDelayHandler();
return false;
}
return true;
},
afterClose: function() {
var wrapper = $(this.getWrapper());
wrapper.find('.custom-close').off();
wrapper.removeClass('open');
closeDelayed = false;
}
}
});
// Open Info Window
//info.close();
});`
Is anyone able to display images inside their info window (without the use of scss)?
hello
it would be great to have the multiple-markers demo also with custom markers
Have a nice day
As on website how I can download 2-3x image of selected area of map ?
We could use a lot more examples showing how specific features of the library are used. These would be good to complete before we officially release the library.
Hi there,
Trying to open a simple Bootstrap Modal from a Snazzy infowindow, but it just doesn't show up, while the same button outside from Google Maps will pop it up easily. Am I doing it wrong or it needs some enhancement (see code below)?
Thanks for your nice job with Snazzy!
<button id="buttonOutside" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>modalcontent</p>
</div>
</div>
</div>
</div>
<div class="map-canvas"></div>
<script>
$(function() {
var map = new google.maps.Map($('.map-canvas')[0], {
zoom: 14,
center: new google.maps.LatLng(40.72, -74)
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(40.72, -74)
});
var info = new SnazzyInfoWindow({
marker: marker,
content: 'infowindow content<br><button id="buttonInside" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>'
});
});
</script>
/**
* Choose where you want the info window to be displayed, relative to the marker.
*/
placement: 'top' | 'bottom' | 'left' | 'right';
Only top works.
I want to have more than 1 map but the infowindows always renders in the first map.
I am using snazzy info window to show hotels in a city and I have made use of all the events for this to work properly because in my case I have more than 800 hotels to show on map, so for memory issues I had to use clustering so there is not too much markers on view... then I use the bounds to limit the markers displayed only to those on view... and this works great now and smooth and no memory issues...but:
my question
is there a way to detect which markers are displayed now a that particular cluster already opened and inside the view only?
I will appreciate any ideas
regards
Hello,
I had a problem with positioning the info window after clicking on the marker. Then I figured out that wrapper .si-float-wrapper
doesn't have position absolute set. The coordinates for position (top, left) was set correctly, but the position attribute was missing. When i set the position to absolute then info window was opened correctly after clicking on marker.
Hi,
Is there a way to open the window outside the map? Instead of scrolling the map up or down depending of the position, let it open outside of the map area?
Thanks in advance.
I have a simple code:
let infoWindow = new SnazzyInfoWindow({ marker, content, closeWhenOthersOpen: true, callbacks: { open: function() { // Show modal }, }
});``
but it seems to be opening far away from the marker
Hi .
I just want to know how to close or destroy multiple info windows .
Regards
The following error is thrown:
snazzy-info-window.js:474 Uncaught TypeError: Cannot read property 'style' of undefined
When using these options:
{pointer: false, shadow: { h: '10px' } }
This error is caused by this line of code:
this._html.shadowPointerInner.style.boxShadow = formatBoxShadow(hRotated, vRotated);
The fix would be to check if shadowPointerInner is null before trying to assign the new box shadow.
Struggling to use the class names to add my own style. Just defaults back to the style given in the github repository
I am using snazzy-info-window in my project.
I include snazzy-info-window.css as recommended:
<link rel="stylesheet" href="node_modules/snazzy-info-window/dist/snazzy-info-window.css"/>
When I load my app with systemjs, everything works fine.
However, when I build with webpack, I get this error:
Error: Path [my path]/node_modules/snazzy-info-window/dist/snazzy-info-window.css not found!
The error happens when I execute gulp-usemin task. It sort of makes sense, as only snazzy-info-window.scss is provided in the dist directory when I install with npm.
Do you have any recommendations on how to address this issue?
I want to trigger a function when a info window is clicked. Is this supported?
We've noticed an issue when using Bootstrap dropdowns within Snazzy Info Window. When expanded, the content gets scrolled instead of being displayed outside of the info window.
I've created a CodePen illustrating the issue here.
This is a little difficult to solve since we also want to maintain scrollable content within the info window. The DOM element si-content
has overflow: auto
to support scrollable content but this causes scroll bars when the dropdown opens and exceeds the size of the content area.
This is normal behaviour but we just want to open this issue up to see if there is a viable workaround to support plugins like Bootstrap dropdown overflowing outside of the content while still supporting scrollable content.
Can we set individual placements per each info box? I.E. Have one location placement on the left and another on the bottom?
The info window adds a DOM listener for mouse events which stops event propagation to the map. We will have to look into why the right click event ignores this DOM listener.
Is it possible to close window on the second click on a marker?
It would be nice to have an option like closeWhenOthersOpen
. Something like closeOnSecondClick
.
We noticed that we're slightly inconsistent with the Google API with our position
option. We'd like to switch to using placement
while maintaining backwards compatibility. All documentation will be updated to reflect this change.
New to this...
I am trying to use this in my React app but it is not working
Here is the related code:
import {SnazzyInfoWindow} from 'snazzy-info-window;
//inside my render
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h5>{this.state.selectedPlace.name}</h5>
<p>{this.state.selectedPlace.address}</p>
<p>{this.state.selectedPlace.busy}</p>
</div>
</InfoWindow>
It isn't working but I'm not sure how else to do it. Any help is greatly appreciated
There is already an issue on this where you say to:
Instead of using:
import SnazzyInfoWindow from 'snazzy-info-window';
Use the following:
let SnazzyInfoWindow = require('snazzy-info-window');
However, I have just downloaded the files and cannot see where to replace this.
I am also getting this error: script.js:388 Uncaught ReferenceError: SnazzyInfoWindow is not defined
Which is probably due to the first error.
How do I fix this?
I am running a map through an ajax request on WordPress, but I keep getting .getMap is not a function, regardless of where I call it.
Looking for some advice to either what I may be doing wrong or what.
var map,
mapElement = jQuery('.map-container').attr('id'),
postsURL = '/wp-json/wp/v2/map-api?per_page=100',
zoom = set_php_vars.zoom,
icon = set_php_vars.defaultIcon,
style = set_php_vars.styling,
catID = set_php_vars.catID,
prev_infowindow = false,
label = 1,
markers = [],
markerArray = [],
cats = [],
count,
items,
center;
function initMap() {
'use strict';
if (catID !== '')
postsURL = '/wp-json/wp/v2/map-api?per_page=100&map-cat=' + catID;
var center = new google.maps.LatLng(set_php_vars.homeLat, set_php_vars.homeLng),
map = new google.maps.Map(document.getElementById(mapElement), {
zoom: parseInt(zoom),
center: center,
mapTypeId: 'terrain',
mapTypeControl: false,
mapTypeIds: ['styledMap']
});
jQuery.getJSON(style, function(data) {
var styledMapType = new google.maps.StyledMapType(
data, {
name: 'Custom Map Styling'
});
map.mapTypes.set('styledMap', styledMapType);
map.setMapTypeId('styledMap');
});
jQuery.ajax({
url: postsURL,
method: 'GET',
success: function(data) {
var marker,
i,
n = 1,
metaMarkup = '',
metaEndMarkup = '',
bounds = new google.maps.LatLngBounds();
data.forEach(function(post) {
//console.log(post);
var pos = new google.maps.LatLng(post.map_fields._map_lat, post.map_fields._map_lng);
bounds.extend(pos);
//<editor-fold desc="Marker Build">
var marker = new google.maps.Marker({
position: pos,
map: map,
title: post.title.rendered,
icon: icon,
city: post.map_fields._map_city,
state: post.map_fields._map_state,
sf: post.map_fields._map_sf || '',
buildingCount: post.map_fields._map_buildings || '',
});
//</editor-fold>
if (marker.sf || marker.buildingCount) {
metaMarkup = '<div class="location-meta">';
metaEndMarkup = '</div>';
}
if (marker.sf)
metaMarkup += '<span class="sf">' + marker.sf + ' SF</span>';
if (marker.buildingCount)
metaMarkup += '<span class="building-count">Buildings: ' + marker.buildingCount + '</span>';
//<editor-fold desc="Content String Build">
var contentString = '<div class="marker-content-container">' +
'<div class="marker-header">' +
'<p>' + marker.title + '</p>' +
'</div> <!-- /.marker-header -->' +
'<div class="marker-address">' +
'<address>' + marker.city + ' ' + marker.state + '</address>' +
'</div> <!-- /.marker-address -->' +
metaMarkup +
'</div>';
markers.forEach(function(marker) {
var info = new SnazzyInfoWindow({
marker: marker,
//content: contentString,
content: 'hi',
});
info.open();
});
});
},
cache: true
});
google.maps.event.addDomListener(window, 'resize', function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
It doesn't seem to be possible but it would be great if you could edit HTML in the online map builder so clients could for example update images that are within the info window.
I have an issue where I can't install this through node on the web server and I also cannot change the JavaScript code on the web server.
In this case, I have a WordPress site, and I'm only able to navigate in the WordPress site and add the plugin or add the Iframe.
How can I have the snazzy-info-window on a WordPress only site.
I know, not the most sexy question, but in this case I'm stuck in de WordPress environment.
Or is this not possible?
Here's my code for initializing the map and its markers and infowindows. Markers are being added just fine, but clicking on the marker throws a marker.getMap is not a function
error, and calling open()
on the info window returns a marker.setMap is not a function
error.
It seems the Snazzy Info Window object can't access the marker
object it has been assigned.
// Google Maps defaults.
const mapOptions = {
center: { lat: 45.526970, lng: -122.678152 },
disableDefaultUI: true,
disableDoubleClickZoom: true,
scrollwheel: false,
};
// Build map.
function initMap(map) {
const embeddedMapContainer = $(map).find('.map__embedded-map')[0];
const markers = $(map).data('map-markers');
// Start a Google Map.
var googleMap = new google.maps.Map(embeddedMapContainer, mapOptions);
// Add and handle interaction for markers.
for (var markerData of markers) {
// Add marker to map.
var marker = new google.maps.Marker({
map: googleMap,
position: {
lat: markerData.lat,
lng: markerData.lng
}
});
// Initialize an info window.
var info = new SnazzyInfoWindow({
marker: marker,
content: markerData.description,
wrapperClass: 'map__marker-popup',
maxWidth: 250,
openOnMarkerClick: true,
closeWhenOthersOpen: true,
showCloseButton: false
})
// Open the info window.
info.open();
}
}
Uncaught TypeError: this.setMap is not a function at e.value (snazzy-info-window.min.js:1)
Sorry for my bad english. I will try to explain.
When I show a window, I want to zoom in on the map where the markers is. When I close the window, I want to zoom out and set new center. I use callbacks.
But when I have multiple markers I get some troubles. When "jumping" directly from one window to another, close, beforeclose and afterclose are executed after the new window is opened. Makes the new window does not get its correct zoom.
Is there a way to zoom out when "last" window is closed?
With "placement:'left'" I get pointer appearing on right side of box, vice versa for "placement:'right'" . "top" & "bottom" work as expected. (for yesterday's download)
Jack Glendening
Is there any method for changing the wrapperClass
after the initial setup? If not, it could be a good enhancement!
My use-case is to add a z-index
to the container div in order to put the selected info-window above the others.. If I am not wrong there isn't anything to archive this in a simple way!
After latest upgrade to:
The example: complex-styles
the width is not coherent.
Hello, please add a method for moving the snazzyInfoWindow, similar to google.maps.InfoWindow setPosition(). That would be very useful, thanks!
When border: false
is applied in javascript, the base CSS border styles will still be set unless the SCSS variable $si-border-included
is set to false
.
Hello,
Could you please clarify if it is possible to change the position of pointer?
For example I want to observe pointer at 30% from the left border of popup.
Thanks.
Not so much of an issue, more of a question. Any ideas of how I'd go about applying this to a custom styled google map, created in Muse via the 'insert HTML' function and Snazzymaps.
My question is this, how would I go about adding the 'snazzy-info-window' to the map? I've tried adding the section of js under " // Add a Snazzy Info Window to the marker" within the supplied scripts.js file to my existing HTML element within muse, however it has no effect. It just 'breaks' the map, so my original grey rectangle (used to create the map with JS).
If this doesn't make sense, it may help to refer to the video tutorial I followed > https://www.youtube.com/watch?v=M_h9Ni3c2eI
Any help would be greatly appreciated, it is also worth noting that I have also linked the stylesheet and JS script into the head of the page (taken from the index.html within the JS Styles folder supplied).
Thanks in advance!
Hi,
I am getting this error in my stack using rails 5 while implementing snazzy markers. Any idea where it can come from? I used NPM as package manager and followed this walkthrough to import properly assets: https://blog.ravenxce.com/using-npm-with-rails/
Please also note that I am using coffee
.
Thanks for the good work!
How do I use this component with agm-direction?
Hi Team,
I have found an issue regarding the same lat and long for more than one user.
how we can display them on a map.currently, they override each other
Latest version from git won't resize the snazzy info window when content is bigger.
Is there a way to get manual control over the width?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.